javascript - OnClick 事件在 Esri map 信息窗口中显示错误

Question

我创建了一个 Esri map 来添加位置，在此 map 中用户将搜索位置并找到其地址。当用户选择相关地址时， map 将带到那里并显示一个包含地址、语言和地段的信息窗口，一个名为“添加位置”的链接。我已经完成了上述所有操作，但在“添加位置”链接上，我分配了一个 onClick 函数，该函数不起作用，说函数未定义，请参阅浏览器控制台。我不明白为什么它会显示这个。请查看链接

 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]);
     }
   }
 });

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;
}

<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>

注意:Esri map 是客户要求。

Answer 1

这是因为像<a onclick="getaddress()">这样写在全局范围内(即在 window 中)搜索 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');
}  

我还修改了这里的代码片段，请在下面查看

 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]);
     }
   }
 });

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;
}

<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>