OnClick 事件在 Esri 地图信息中显示错误 window

Question

我已经创建了一个用于添加位置的 Esri 地图，用户将在该地图中搜索位置并找到其地址。当用户 select 相关的地址映射将带到他那里并显示一个信息 Window 与地址和 Lang 和 Lot，一个 Link 叫 "Add Location"。我已经完成了以上所有事情，但是在 "Add Location" link 上我分配了一个 onClick 函数，该函数不起作用说函数未定义，请参阅浏览器控制台。我不明白为什么它显示这个。请看一下 link

 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 地图是客户要求的。

Answer 1

这是因为像 <a onclick="getaddress()"> 这样的写法在全局范围内搜索 getaddress，即在 window 中。但是您已经在 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>

OnClick 事件在 Esri 地图信息中显示错误 window

OnClick Event showing error in Esri map Info window

javascript

geocoding

esri