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

我已经创建了一个Esri地图以添加位置，在该地图中，用户将搜索位置并找到其地址。当用户选择相关的地址地图时，将带他到那里，并显示一个包含地址以及Lang和Lot的信息窗口，该链接称为“添加位置”。我已完成上述所有操作，但在“添加位置”链接上分配了一个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映射是客户要求。

最佳答案

这是因为像<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>