Estoy escribiendo código para el widget de búsqueda para simplificar el proceso de búsqueda de ubicaciones en un mapa. Todo lo que quiero hacer es escribir la ubicación del área, lugar o cualquier camino, y me llevará a ese lugar.
Pero mi código parece tener algún problema y muestra la pantalla en blanco:
<!DOCTYPE html> <html dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/esri/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 74px; } </style> <script src="https://js.arcgis.com/3.38/"></script> <script> require([ "esri/map", "dojo/domReady!" ], function (Map) { var map = new Map("map", { basemap: "gray-vector", center: [-120.435, 46.159], // lon, lat zoom: 6 }); var search = new Search({ map: map }, "search"); search.startup(); }); </script> </head> <body class="calcite"> <div id="search"></div> <div id="map"></div> </body> </html>Solo te falta la importación del widget de Search .
<!DOCTYPE html> <html dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/dijit/calcite.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.38/esri/themes/calcite/esri/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 74px; } </style> <script src="https://js.arcgis.com/3.38/"></script> <script> require([ "esri/map", "esri/dijit/Search", "dojo/domReady!" ], function (Map, Search) { var map = new Map("map", { basemap: "gray-vector", center: [-120.435, 46.159], // lon, lat zoom: 6 }); var search = new Search({ map: map }, "search"); search.startup(); }); </script> </head> <body class="calcite"> <div id="search"></div> <div id="map"></div> </body> </html>Le sugiero que use la nueva versión de la API.