2

我们正在尝试找到有关在单击地图上的新点后如何隐藏标记的建议或实施选项。

在我们的应用程序中，一旦用户单击地图上的特定图钉，我们就会显示与点击事件相关联的新图钉（在不同的纬度/经度位置）。即一个点应该在俄克拉荷马州，但地图显示的是德克萨斯州，因此一旦单击标记德克萨斯州，就会显示俄克拉荷马州的一个新标记。我们的问题是，每当用户选择一个新点时，我们都无法“隐藏”先前选择的标记，这会使我们的屏幕变得混乱。

关于我们如何处理这个问题的任何建议？

代码如下：

require(["esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "dojo/_base/array", "dojo/dom-style", "dojox/widget/ColorPicker", "esri/InfoTemplate", "esri/Color", "dojo/dom", "dojo/domReady!", "esri/geometry/Polyline", "esri/geometry/geodesicUtils", "esri/units","esri/symbols/SimpleLineSymbol"],   
 function( Map, Point,SimpleMarkerSymbol, Graphic, arrayUtils, domStyle, ColorPicker, InfoTemplate, Color, dom, Polyline, geodesicUtils, Units,SimpleLineSymbol) {   
 map = new Map("mapDiv", {  
 center  : [-98.35, 35.50],  
 zoom    : 5,  
 basemap : "topo"  
 //basemap types: "streets", "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"  
 } );  
 map.on("load", pinMap);  
 var arr = [];  
 var initColor, iconPath;  
 function pinMap( ) {  
 map.graphics.clear();  
 iconPath  = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";  
 var infoContent = "<b>Id</b>: ${Id} ";  
 var infoTemplate = new InfoTemplate(" Details",infoContent);  
 $.post( '{{ path( 'points' ) }}', {}, function( r ) {   
 arrayUtils.forEach( r.points, function( point ) {  
 if (point.test==1) {  
 initColor = "#CF3A3A";  
 }  
 else {  
 initColor = "#FF9900";  
 }  
 arr.push(point.id,point.pinLon1,point.pinLat1,point.pinLon2,point.pinLat2);  
 var attributes = {"Site URL":point.url,"Activity Id":point.id,"Updated By":point.updated,"Customer":point.customer};  
 var graphic   = new Graphic(new Point(point.pinLon1,point.pinLat1),createSymbol(iconPath,initColor),attributes,infoTemplate);  
 map.graphics.add( graphic );  
 map.graphics.on("click",function(evt){  
 var Content = evt.graphic.getContent();  
 var storeId = getStoreId(Content);  
 sitePins(storeId);  
 });  
 } );  
 }, 'json' );  
 }  
 function getStoreId( content ){  
 var init = content.split(":");  
 var fin= init[2].split("<");  
 return fin[0].trim();  
 }  
 function sitePins( siteId ) {  
 iconPathSite  = "M15.834,29.084 15.834,16.166 2.917,16.166 29.083,2.917z";  
 initColorSite = "#005CE6";  
 var infoContent = "<b>Distance</b>: ${Distance} Miles";  
 var infoTemplate = new InfoTemplate(" Distance to Location",infoContent);  
 var indexValue=0;  
 for (var index = 0; index < arr.length; index++){  
 if (arr[index]==storeId){  
 indexValue =index;  
 }  
 }  
 pinLon1 = arr[indexValue+1];  
 pinLat1 = arr[indexValue+2];  
 pinLon2 = arr[indexValue+3];  
 pinLat2 = arr[indexValue+4];  
 var line = {"paths":[[[pinLon1, pinLat1], [pinLon2, pinLat2]]]};  
 line = new esri.geometry.Polyline(line);  
 var lengths = Number(esri.geometry.geodesicLengths([line], esri.Units.MILES)).toFixed(2);  
 var attributes = {"Distance":lengths};  
 var graphicSite = new Graphic(new Point (pinLon1,pinLat1), createSymbol(iconPathSite, initColorSite),attributes,infoTemplate);  
 var pathLine = new esri.Graphic(line, new esri.symbol.SimpleLineSymbol());  
 map.graphics.add( pathLine );  
 map.graphics.add( graphicSite );  
 }  

 function createSymbol( path, color ) {  
 var markerSymbol = new esri.symbol.SimpleMarkerSymbol( );  
 markerSymbol.setPath(path);  
 markerSymbol.setSize(18);  
 markerSymbol.setColor(new dojo.Color(color));  
 markerSymbol.setOutline(null);  
 return markerSymbol;  
 }  
 } );  
 </script>
4

1 回答 1

0

就我得到的代码而言，它显示了标记和然后单击的点之间的距离。您正在地图上的每个单击事件上创建点和折线。以下可以提供帮助：

1) 请提供 id say 'abc' to polyline, 图形站点。

2) 然后在每次点击事件中删除 id 为“abc”的图形和折线。

    dojo.forEach(this.map.graphics.graphics, function(g) {  
         if( g && g.id === "abc" ) {  
        //remove graphic with specific id  
           this.map.graphics.remove(g);  
         }  

}, this);

3）然后您可以创建新的折线并像您已经在做的那样指向。

于 2014-10-21T19:10:19.127 回答