在Esri地圖信息窗口中顯示錯誤的OnClick事件

Question

我已經創建了一個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地圖是客戶要求。

Answer 1

這是因為像<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');
}  

我也在這里修改了片段，請在下面查看

  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>