在Esri地图信息窗口中显示错误的OnClick事件

时间：2016-03-11 18:14:20

标签： javascript geocoding esri

我已经为添加位置创建了Esri地图，在此地图中用户将搜索位置并找到其地址。当用户选择相关的地址映射时，他将在那里显示一个信息窗口，其中包含地址和Lang和Lot，这是一个名为＆＃34; Add Location＆＃34;的链接。我做了以上所有事情，但是在＆＃34;添加位置＆＃34;链接我分配一个onClick函数，该函数不工作说功能未定义，请参阅浏览器控制台。我不明白为什么会这样。请看一下链接

＆＃13;
＆＃13; 
 var map, gsvc, pt;

 require([
   "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
   "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
   "esri/SpatialReference", "esri/InfoTemplate", "esri/dijit/Search", "dojo/dom", "dojo/on",
   "dojo/domReady!"
 ], function(
   Map, Graphic, SimpleMarkerSymbol,
   GeometryService, ProjectParameters,
   SpatialReference, InfoTemplate, Search, dom, on
 ) {
   map = new Map("map", {
     basemap: "streets",
     center: [77.0167, 38.8833],
     zoom: 9
   });

   gsvc = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

   var search = new Search({
     map: map
   }, "search");

   search.startup()

   search.on("select-result", showLocation);

   function showLocation(e) {
     map.graphics.clear();
     var point = e.result.feature.geometry;
     var ppy = point.getLatitude().toFixed(4);
     var ppx = point.getLongitude().toFixed(4);

     map.infoWindow.setTitle("Search Result");
     map.infoWindow.setContent(e.result.name + ' test ' + ppy + ',' + ppx + '<br><a onClick="getaddress();" id="addloc" href="javascript:;">Add Location</a>');
     var s_res = e.result.name
     console.log(e.result.name);

     function getaddress() {
       alert('location added');
     }

     final_s_res = s_res.split(",");
     for (i = 0; i < final_s_res.length; i++) {
       console.log("<br /> Element " + i + " of the array is: " + final_s_res[i]);
     }
   }
 });
＆＃13; 
html,
body,
#map,
.map.container {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#info {
  top: 2px;
  color: #444;
  height: auto;
  font-family: arial;
  font-weight: bold;
  left: 69px;
  margin: 5px;
  padding: 10px;
  position: absolute;
  width: 260px;
  z-index: 40;
  border: solid 1px #003300;
  border-radius: 4px;
  background-color: #E5E5E5;
}
#search {
  display: block;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 74px;
}
/*Beginning of search box modifications*/

.arcgisSearch .searchClear {
  background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
  background-image: url("finding.png");
  background-size: 20px 20px;
}
.esriIconZoom:before {
  content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
  border: 1px solid #003300;
  background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
  color: red;
  font-size: 14px;
}
/*Beginning of popup modifications*/

.esriPopup .titlePane {
  background-color: #003300;
  border-bottom: 1px solid #121310;
  font-weight: bold;
}
.esriPopup a {
  color: #DAE896;
}
.esriPopup .contentPane,
.esriPopup .actionsPane,
.esriPopup .pointer,
.esriPopup .outerPointer {
  background-color: #B3B3B3;
}
＆＃13; 
<link href="https://js.arcgis.com/3.16/esri/css/esri.css" rel="stylesheet"/>
<link href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div id="search"></div>
<div id="map"></div>
<script src="https://js.arcgis.com/3.16/"></script>
＆＃13;
＆＃13;
＆＃13;

注意：Esri地图是客户要求。

1 个答案:

答案 0 :(得分：0)

这是因为像<a onclick="getaddress()">这样的写作在全局范围内搜索getaddress，即在窗口中。但是你已经在showlocation方法中定义了getaddress。因此要么将getaddress带到全局范围，要么执行以下操作

map.infoWindow.setContent(e.result.name +' test ' + ppy + ',' + ppx + '<br><a id="addloc" href="javascript:;">Add Location</a>');
var s_res = e.result.name
console.log(e.result.name, map.infoWindow);

// this does the magic
map.infoWindow.domNode.querySelector('#addloc').onclick = function getaddress(){  
   alert('location added');
}

我也在这里修改了片段，请在下面查看

＆＃13;
＆＃13; 
 var map, gsvc, pt;

 require([
   "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
   "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
   "esri/SpatialReference", "esri/InfoTemplate", "esri/dijit/Search", "dojo/dom", "dojo/on",
   "dojo/domReady!"
 ], function(
   Map, Graphic, SimpleMarkerSymbol,
   GeometryService, ProjectParameters,
   SpatialReference, InfoTemplate, Search, dom, on
 ) {
   map = new Map("map", {
     basemap: "streets",
     center: [77.0167, 38.8833],
     zoom: 9
   });

   gsvc = new GeometryService("https://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

   var search = new Search({
     map: map
   }, "search");

   search.startup()

   search.on("select-result", showLocation);

   function showLocation(e) {
     map.graphics.clear();
     var point = e.result.feature.geometry;
     var ppy = point.getLatitude().toFixed(4);
     var ppx = point.getLongitude().toFixed(4);

     map.infoWindow.setTitle("Search Result");
     map.infoWindow.setContent(e.result.name +' test ' + ppy + ',' + ppx + '<br><a id="addloc" href="javascript:;">Add Location</a>');
     var s_res = e.result.name
	 console.log(e.result.name);

     // adds onclick handler to the node
     map.infoWindow.domNode.querySelector('#addloc').onclick = function getaddress(){  
	       alert('location added');
    	}  

     final_s_res = s_res.split(",");
     for (i = 0; i < final_s_res.length; i++) {
       console.log("<br /> Element " + i + " of the array is: " + final_s_res[i]);
     }
   }
 });
＆＃13; 
html,
body,
#map,
.map.container {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#info {
  top: 2px;
  color: #444;
  height: auto;
  font-family: arial;
  font-weight: bold;
  left: 69px;
  margin: 5px;
  padding: 10px;
  position: absolute;
  width: 260px;
  z-index: 40;
  border: solid 1px #003300;
  border-radius: 4px;
  background-color: #E5E5E5;
}
#search {
  display: block;
  position: absolute;
  z-index: 2;
  top: 70px;
  left: 74px;
}
/*Beginning of search box modifications*/

.arcgisSearch .searchClear {
  background-color: #E5E5E5;
}
.arcgisSearch .esriIconZoom {
  background-image: url("finding.png");
  background-size: 20px 20px;
}
.esriIconZoom:before {
  content: "";
}
.arcgisSearch .searchGroup .searchInput,
.arcgisSearch .searchBtn,
.arcgisSearch .noResultsMenu,
.arcgisSearch .suggestionsMenu {
  border: 1px solid #003300;
  background-color: #E5E5E5;
}
.arcgisSearch .noValueText {
  color: red;
  font-size: 14px;
}
/*Beginning of popup modifications*/

.esriPopup .titlePane {
  background-color: #003300;
  border-bottom: 1px solid #121310;
  font-weight: bold;
}
.esriPopup a {
  color: #DAE896;
}
.esriPopup .contentPane,
.esriPopup .actionsPane,
.esriPopup .pointer,
.esriPopup .outerPointer {
  background-color: #B3B3B3;
}
＆＃13; 
<link href="https://js.arcgis.com/3.16/esri/css/esri.css" rel="stylesheet"/>
<link href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" rel="stylesheet"/>
<div id="search"></div>
<div id="map"></div>
<script src="https://js.arcgis.com/3.16/"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题