Проблемы с виджем поиска - ArcGIS API для Javascript

Я новичок в этом. Я скрепил код из разных примеров. Я пытаюсь создать карту с виджем поиска и в которой всплывающая информация появляется в панели внизу. Кажется, я не могу обойти оба.Проблемы с виджем поиска - ArcGIS API для Javascript

Когда parser.parse() закомментирован: (1) виджет поиска появляется, но не имеет полной функциональности (без всплывающего окна, без увеличения). (2) всплывающая информация не отображается в нижней строке

Когда элемент parser.parse() не закомментирован, виджет поиска вообще не отображается, но всплывающая информация отображается в нижней панели, когда я щелкните функцию.

Что я делаю неправильно?

<!DOCTYPE html> 
<html> 
<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"> 
<title>Garbage and Recycling</title> 
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" /> 
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" /> 
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open Sans"> 

<style> 
    html, body { 
     height:100%; 
     width:100%; 
     margin:0; 
     padding:0; 
     margin:0; 
     font-family: "Open Sans"; 
    } 
    #search{ 
     display:block; 
     background-color: white; 
     position: absolute !important; 
     top: 20px; 
     right: 20px; 
    } 
    #container{ 
     width: 100%; 
     position: absolute; 
     bottom:0; 
     background-color:rgba(0,0,0,0.8); 
     color: white; 
     } 
    #instructionDiv{ 
     font-style:italic; 
     } 
    #zoneDiv{ 
     font-weight: bold; 
     padding-bottom:0; 
     } 
    #linkDiv{ 
     padding-top:0; 
     } 
    #garDiv{ 
     padding-bottom: 0; 
     } 
    #recDiv{ 
     padding-top:0; 
     } 
    #map { 
     padding:0; 
    } 
    .nav { 
     padding: 5px 10px; 
     background: #4479BA; 
     color: #FFF; 
     border-radius: 5px; 
     border: solid 1px #20538D; 
     text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); 
     -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 
    } 
</style> 

<script src="https://js.arcgis.com/3.15/"></script> 
<script> 
    require([ 
     "dojo/on", 
     "dojo/_base/connect", 
     "dojo/dom", 
     "dijit/registry", 
     "dojo/dom-construct", 
     "dojo/parser", 
     "dijit/layout/BorderContainer", 
     "dijit/layout/ContentPane", 
     "esri/map", 
     "esri/arcgis/utils", 
     "esri/domUtils", 
     "esri/dijit/Popup", 
     "esri/dijit/Search" 
     ], 
    function(
     on, 
     connect, 
     dom, 
     registry, 
     domConstruct, 
     parser, 
     BorderContainer, 
     ContentPane, 
     Map, 
     arcgisUtils, 
     domUtils, 
     Popup, 
     Search 
     ) 
    { 
//parser.parse(); 
      //Create a map based on an ArcGIS Online web map id 
      arcgisUtils.createMap("5cdc921a8e2d4eb08ab64a63d1c46e23", "map").then 
      (function(response){ 
      var map = response.map; 

       //set infoWindow to false 
      map.infoWindow.set("popupWindow", false); 

       initializeBottomBar(map); 

       //create Search 
       var search = new Search({map:map, enableInfoWindow: true, zoomScale: 1000}, "search"); 
       search.startup(); 
      }); 


      //initialize Bottom Bar (bottom) 
      function initializeBottomBar(map){ 
       var popup = map.infoWindow; 

       //when the selection changes, update the info bar 
       connect.connect(popup, "onSelectionChange", function(){ 
       displayContent(popup.getSelectedFeature()); 
       }); 

       connect.connect(popup, "onSetFeatures", function(){ 
       displayContent(popup.getSelectedFeature()); 
       }); 
      } 

      function displayContent(feature){ 
       if(feature){ 
       var content = feature.getContent(); 
       registry.byId("zoneDiv").set("content", content); 
       } 
       } 

    }); 

</script> 
</head> 

<body class="claro"> 
     <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="width: 100%; height: 100%"> 
     </div> 
     <div id="search" data-dojo-type="dijit/layout/ContentPane"></div> 
     <div id="container" data-dojo-type="dijit/layout/ContentPane"> 
     <div id="instructionDiv" data-dojo-type="dijit/layout/ContentPane">Click a collection zone on the map for more details.</div> 
     <div id="zoneDiv" data-dojo-type="dijit/layout/ContentPane"></div> 
     <div id="linkDiv" data-dojo-type="dijit/layout/ContentPane"></div> 
     <div id="descDiv" data-dojo-type="dijit/layout/ContentPane"></div> 
     <div id="garDiv" data-dojo-type="dijit/layout/ContentPane"></div> 
     <div id="recDiv" data-dojo-type="dijit/layout/ContentPane"></div> 
     </div> 
</body> 

</html>

источник

2015-12-14 lauralu78

включает это в конце вашего требует массиву

"dojo/domReady!"

нет необходимости ставить соответствующий аргумент в функции, хотя вы можете для полноты и избежать проблем, когда вы неизбежно добавить еще один модуль требуют и забыть переупорядочить аргументы так: «dojo/domReady!» последнее.

EDIT:

дополнительно для любого кода виджета вы должны включить "dojo/ready" в Требовать массив, а затем обернуть код виджета в

ready(function(){..widget code goes here...})

См this codepen для рабочего примера

См мой ответ this question для получения более подробной информации

источник

2015-12-24 18:57:12 Ryan

T ханков, но это не сработало. – lauralu78

Отредактировал мой ответ. и отправил код – Ryan

Проблемы с виджем поиска - ArcGIS API для Javascript

ответ

Смежные вопросы