如何删除开发者中的特定标记 [英] how to remove a specific marker in openlayer

查看：186
本文介绍了如何删除开发者中的特定标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是来自capdragon的新代码，但现在它不会创建标记。我现在不知道如何解决这个问题。
我认为代码片段是解决我之前识别标记问题的一个非常聪明的方法，它现在可能是一个非常小的事情。 

 < title> Open Street Map< / title> 
< style type =text / css> 
 html，body，#demo {
 position：absolute;剩余
：2％; 
 width = 25％
} 
 html，body，#activePlanes {
 position：absolute;剩余
：2％; 
 width = 25％
} 
 html，body，#mapBox {
 position：fixed; 
 top：0; 
 right：0; 
宽度：75％; 
身高：100％; 
} 
< / style> 
 
< script src =http://www.openlayers.org/api/OpenLayers.js>< / script> 
< script type =text / javascript> 
 
 var arrMarkers = []; 
函数AddPlaneMarker（planeID，lonlat）
 {
 var markers = new OpenLayers.Layer.Markers（Markers）; 
 map.addLayer（markers）; 
 var marker = new OpenLayers.Marker（lonlat）; 
 marker.PlaneID = planeID; 
 markers.addMarker（marker）; 
 arrMarkers.push（marker）; 
 
 
函数RemovePlaneMarker（planeID）
 {
（arrMarkers中的var x）
 {
 if（arrMarkers [x]。 PlaneID == planeID）
 {
 arrMarkers.splice（x，1）; 
 markers.removeMarker（arrMarkers [x]）; 
 return; 
 
 
 
 $ b函数GetPlaneMarker（planeID）
 {
（arrMarkers中的var x）
 {
 if（arrMarkers [x] .PlaneID == planeID）
 {
 return arrMarkers [x]; 
 
 
 
 
 function displayPlane（）
 {
 var x = document.getElementById（'planeList'）; 
 var newPlane = document.createElement（'option'）; 
 newPlane.text = document.getElementById（plane_ID）。value; 
 if（newPlane.text == null || newPlane.text ==）
 {
 alert（请指定飞机ID）; 
} 
 else 
 {
 try 
 {
 x.add（newPlane，x.newPlane [null]）; //符合标准;在IE 
中无效
 catch（e）
 {
 x.add（newPlane，null）; // document only 
} 
 var lonLat = new OpenLayers.LonLat（document.getElementById（long）.value，document.getElementById（lat）.value）.transform（
新的OpenLayers.Projection（EPSG：4326），
 map.getProjectionObject（））; 
 var planeID = document.getElementById（plane_ID）; 
 AddPlaneMarker（planeID，lonLat）; 
 
 
 
函数init（）
 {
 map = new OpenLayers.Map（mapBox）; 
 map.addLayer（new OpenLayers.Layer.OSM（））; 
 focusPoint = new OpenLayers.LonLat（-81.04818,29.18710）
 focusPoint.transform（new OpenLayers.Projection（EPSG：4326），map.getProjectionObject（））; 
 map.setCenter（focusPoint，14）; 
 
 
函数newLonLat（）
 {
 var newValues = prompt（请指定飞机的新位置，-81.07870 29.17210）; 
 var theValues = newValues.split（）; 
 var newPixel = map.getLayerPxFromViewPortPx（map.getPixelFromLonLat（new OpenLayers.LonLat（theValues [0]，theValues [1]）。transform（
 new OpenLayers.Projection（EPSG：4326），
 map.getProjectionObject（））））; 
 marker.moveTo（newPixel）; 
 
 
函数removePlane（）
 {
 var x = document.getElementById（planeList）; 
 x.remove（x.selectedIndex）; 
 var planeID = x.options [x.selectedIndex] .text; 
 RemovePlaneMarker（planeID）; 
} 
< / script> 
 
< body onload =init（）;> 
< div id =mapBox>< / div> 
< / body> 
< body> 
< br />< div id =demo> 
 Aircraft ID：< input type =textid =plane_IDvalue =AA5024/>< br /> 
 Longitude：& nbsp;< input type =textid =longvalue = -  81.04818/>< br /> 
 Latitude：& nbsp;& nbsp;& nbsp;< input type =textid =latvalue =29.18710/>< br /><< br / ; br /> 
 dd& nbsp;& nbsp;& nbsp;& nbsp;< button value =Add AircraftOnClick =displayPlane（）> Add Aircraft< / button>< / DD> 
< br />< br /> 
< h3>>< dd> Active Planes< / dd>< / h3> 
< select id =planeListsize =10multiple =multiplestyle =text-align：centerondblclick =newLonLat（）> 
< option> ---------- Plane ID ----------< / option> 
< / select>< br /> 
< dd><按钮值=移除飞机OnClick =removePlane（）>移除飞机< /按钮>< / dd> 
< / div> 
< / body>


解决方案

markers 和 marker 看起来不像它们在 removePlane（）范围内可用。



尝试在全局范围内声明它们，并在实例化它们时移除 var ：

 < script type =text / javascript> 
 ... 
 var markers，marker; 
 ... 
函数displayPlane（）
 ... 
 markers = new OpenLayers.Layer.Markers（name）; 
 ... 
 marker = new OpenLayers.Marker（lonLat）; 
 ...



每条评论更新：



我真的很喜欢我最后的选择最好的

我会跟踪他们在我自己的Plane对象的数组中，这些对象包含对标记。像这样： 

  var arrPlaneObjects = []; 
 
函数AddPlaneMarker（planeID，lonlat）{
 
 var objPlane = {}; 
 objPlane.ID = planeID; 
 objPlane.Marker = new OpenLayers.Marker（lonLat）; 
 //添加到图层。 
 markers.addMarker（objPlane.Marker）; 
 //添加到数组。 
 arrPlaneObjects.push（objPlane）; 
} 
 
函数RemovePlaneMarker（planeID）{
（arrPlaneObjects中的var x）{
 if（arrPlaneObjects [x] .ID == planeID）{
 //从数组中移除。 
 arrPlaneObjects.splice（x，1）; 
 //从图层中移除。 
 markers.removeMarker（arrPlaneObjects [x] .Marker）; 
 return; 
} 
} 
}


然后你可以使用它来轻松添加和删除标记：

  AddPlaneMarker（AA5024，lonLat） ; 
 
 RemovePlaneMarker（AA2222）;

另一个选择是保持跟踪数组中的标记并将平面ID存储在这样的标记： 

  var arrMarkers = []; 
 
函数AddPlaneMarker（planeID，lonlat）{
 
 var marker = new OpenLayers.Marker（lonLat）; 
 marker.PlaneID = planeID; 
 //添加到图层。 
 markers.addMarker（marker）; 
 //添加到数组。 
 arrMarkers.push（marker）; 
} 
 
函数RemovePlaneMarker（planeID）{
（arrMarkers中的var x）{
 if（arrMarkers [x] .PlaneID == planeID）{
 
 //从图层中移除。 
 markers.removeMarker（arrMarkers [x]）; 
 //从数组中移除。 
 arrMarkers.splice（x，1）; 
 return; 
 
 
 
 
 
 
稍后调用它们： 
 
 
 pre $ 函数GetPlaneMarker（planeID）{
（arrMarkers中的var x）{
 if（arrMarkers [x] .PlaneID == planeID）{
 return arrMarkers [x]; 
} 
} 
} 
 
 var myPlaneMarker = GetPlaneMarker（AA2222）;



解决方案更新



 < title> Open Street Map< / title> 
< style type =text / css> 
 html，body，#demo {
 position：absolute;剩余
：2％; 
 width = 25％
} 
 html，body，#activePlanes {
 position：absolute;剩余
：2％; 
 width = 25％
} 
 html，body，#mapBox {
 position：fixed; 
 top：0; 
 right：0; 
宽度：75％; 
身高：100％; 
} 
< / style> 
 
< script src =http://www.openlayers.org/api/OpenLayers.js>< / script> 
< script type =text / javascript> 
 
 var arrMarkers = []; 
 var markers; 
 
函数AddPlaneMarker（planeID，lonlat）{
 
 var marker = new OpenLayers.Marker（lonlat）; 
 marker.PlaneID = planeID; 
 markers.addMarker（marker）; 
 arrMarkers.push（marker）; 
 
 
 
函数RemovePlaneMarker（planeID）{
（arrMarkers中的var x）{
 if（arrMarkers [x] .PlaneID == planeID ）{
 
 markers.removeMarker（arrMarkers [x]）; 
 arrMarkers.splice（x，1）; 
 
 return; 
 
 
 
 $ b函数GetPlaneMarker（planeID）{
（arrMarkers中的var x）{
 if（arrMarkers [x ] .PlaneID == planeID）{
 return arrMarkers [x]; 
 
 
 
 
 function displayPlane（）{
 var x = document.getElementById（'planeList'）; 
 var newPlane = document.createElement（'option'）; 
 newPlane.text = document.getElementById（plane_ID）。value; 
 if（newPlane.text == null || newPlane.text ==）{
 alert（请指定飞机ID）; 
} 
 else {
 try {
 x.add（newPlane，x.newPlane [null]）; //符合标准;在IE 
中不起作用} 
 catch（e）{
 x.add（newPlane，null）; // document only 
} 
 var lonLat = new OpenLayers.LonLat（document.getElementById（long）.value，document.getElementById（lat）.value）.transform（
新的OpenLayers.Projection（EPSG：4326），
 map.getProjectionObject（））; 
 var planeID = document.getElementById（plane_ID）.value; 
 AddPlaneMarker（planeID，lonLat）; 
 
 
 
函数init（）{
 map = new OpenLayers.Map（mapBox）; 
 map.addLayer（new OpenLayers.Layer.OSM（））; 
 focusPoint = new OpenLayers.LonLat（-81.04818,29.18710）
 focusPoint.transform（new OpenLayers.Projection（EPSG：4326），map.getProjectionObject（））; 
 map.setCenter（focusPoint，14）; 
 
 markers = new OpenLayers.Layer.Markers（Markers）; 
 map.addLayer（markers）; 
} 
 
函数newLonLat（）{
 var newValues = prompt（请指定飞机的新位置，-81.07870 29.17210）; 
 var theValues = newValues.split（）; 
 var newPixel = map.getLayerPxFromViewPortPx（map.getPixelFromLonLat（new OpenLayers.LonLat（theValues [0]，theValues [1]）。transform（
 new OpenLayers.Projection（EPSG：4326），
 map.getProjectionObject（））））; 
 marker.moveTo（newPixel）; 
 
 
 function removePlane（）{
 var x = document.getElementById（planeList）; 
 var id = x.options [x.selectedIndex] .value; 
 x.remove（x.selectedIndex）; 
 RemovePlaneMarker（id）; 
} 
< / script> 
 
< body onload =init（）;> 
< div id =mapBox>< / div> 
 
< br />< div id =demo> 
 Aircraft ID：< input type =textid =plane_IDvalue =AA5024/>< br /> 
 Longitude：& nbsp;< input type =textid =longvalue = -  81.04818/>< br /> 
 Latitude：& nbsp;& nbsp;& nbsp;< input type =textid =latvalue =29.18710/>< br /><< br / ; br /> 
 dd& nbsp;& nbsp;& nbsp;& nbsp;< button value =Add AircraftOnClick =displayPlane（）> Add Aircraft< / button>< / DD> 
< br />< br /> 
< h3>>< dd> Active Planes< / dd>< / h3> 
< select id =planeListsize =10multiple =multiplestyle =text-align：centerondblclick =newLonLat（）> 
< option> ---------- Plane ID ----------< / option> 
< / select>< br /> 
< dd><按钮值=移除飞机OnClick =removePlane（）>移除飞机< /按钮>< / dd> 
< / div> 
< / body>


This is the new code with the update from capdragon, but now it would not create markers. I don't know how to fix this now. I think the code snippet was a really smart way to fix my previous problem of identifying the markers, and it is probably a really small things i am missing now. Any help again would be greatly appreciated.

<title>Open Street Map</title>
        <style type="text/css">
        html, body, #demo {
        position: absolute;
        left: 2%;
        width = 25%
        }
        html, body, #activePlanes {
        position: absolute;
        left: 2%;
        width = 25%
        }
        html, body, #mapBox {
        position: fixed;
        top: 0;
        right: 0;
        width: 75%;
        height: 100%;
        }
        </style>

        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">

        var arrMarkers = [];
        function AddPlaneMarker(planeID, lonlat)
        {
            var markers = new OpenLayers.Layer.Markers("Markers");
            map.addLayer(markers);
            var marker = new OpenLayers.Marker(lonlat);
            marker.PlaneID = planeID;
            markers.addMarker(marker);
            arrMarkers.push(marker);
        }

        function RemovePlaneMarker(planeID)
        {
            for(var x in arrMarkers)
            {
                if(arrMarkers[x].PlaneID == planeID)
                {
                    arrMarkers.splice(x, 1);
                    markers.removeMarker(arrMarkers[x]); 
                    return;
                }       
            }
        }  

        function GetPlaneMarker(planeID)
        {
            for(var x in arrMarkers)
            {
                if(arrMarkers[x].PlaneID == planeID)
                {
                    return arrMarkers[x];
                }       
            }
        }

        function displayPlane()
        {
            var x = document.getElementById('planeList');
            var newPlane = document.createElement('option');
            newPlane.text = document.getElementById("plane_ID").value;
            if (newPlane.text == null || newPlane.text == "")
            {
                alert("Please specify an Aircraft ID");
            }
            else
            {
                try
                {
                    x.add(newPlane, x.newPlane[null]); // standards compliant; doesn't work in IE
                }
                catch(e)
                {
                    x.add(newPlane, null); // IE only
                }
                var lonLat = new OpenLayers.LonLat(document.getElementById("long").value, document.getElementById("lat").value).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject());
                var planeID = document.getElementById("plane_ID");
                AddPlaneMarker(planeID,lonLat);
            }
        }

        function init()
        {
            map = new OpenLayers.Map("mapBox");
            map.addLayer(new OpenLayers.Layer.OSM());
            focusPoint = new OpenLayers.LonLat(-81.04818, 29.18710)
            focusPoint.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter(focusPoint, 14);
        }

        function newLonLat()
        {
            var newValues = prompt("Please specify new location of the Aircraft", "-81.07870 29.17210");
            var theValues = newValues.split(" ");
            var newPixel = map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new OpenLayers.LonLat(theValues[0], theValues[1]).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject())));
            marker.moveTo(newPixel);
        }

        function removePlane()
        {
            var x=document.getElementById("planeList");
            x.remove(x.selectedIndex);
            var planeID = x.options[x.selectedIndex].text;
            RemovePlaneMarker(planeID);
        }
        </script>

        <body onload="init();">
        <div id="mapBox"></div>
        </body>
        <body>
        <br /><div id="demo">
        Aircraft ID: <input type="text" id="plane_ID" value="AA5024"/><br />
        Longitude: &nbsp;<input type="text" id="long" value="-81.04818" /><br />
        Latitude: &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="lat" value="29.18710" /><br /><br />
        <dd>&nbsp;&nbsp;&nbsp;&nbsp;<button value="Add Aircraft" OnClick="displayPlane()">Add Aircraft</button></dd>
        <br /><br />
        <h3><dd>Active Planes</dd></h3>
        <select id="planeList" size="10" multiple="multiple" style="text-align:center" ondblclick="newLonLat()">
        <option>----------Plane ID----------</option>
        </select><br />
        <dd><button value="Remove Aircraft" OnClick="removePlane()">Remove Aircraft</button></dd>
        </div>
        </body>

解决方案

markers and marker don't look like they are available in the scope of removePlane().

Try declaring them in the global scope and removing the var when you instantiate them.:

<script type="text/javascript">
...
var markers, marker;
...
        function displayPlane()
             ...
             markers = new OpenLayers.Layer.Markers(name);
             ...
             marker = new OpenLayers.Marker(lonLat);
...

Update per comment:

I actually like my last option best

I would keep track of them in an array of my own Plane objects that contain a reference to the Markers. Something like this:

​var arrPlaneObjects = []​;

function AddPlaneMarker(planeID, lonlat){

    var objPlane = {};
    objPlane.ID = planeID;
    objPlane.Marker = new OpenLayers.Marker(lonLat);
    //Add to layer.
    markers.addMarker(objPlane.Marker);
    //Add to array.
    arrPlaneObjects.push(objPlane);
}

function RemovePlaneMarker(planeID){
    for(var x in arrPlaneObjects){
        if(arrPlaneObjects[x].ID == planeID){
            //Remove from array.
            arrPlaneObjects.splice(x, 1);
            //Remove from layer.
            markers.removeMarker(arrPlaneObjects[x].Marker); 
            return;
        }       
    }
}

Then you could use this to easily add and remove markers: 

AddPlaneMarker("AA5024", lonLat);

RemovePlaneMarker("AA2222");

Another option would be to just keep of track of the markers in an array and store the plane id within that marker like such:

​var arrMarkers = []​;

function AddPlaneMarker(planeID, lonlat){

    var marker = new OpenLayers.Marker(lonLat);
    marker.PlaneID = planeID;
    //Add to layer.
    markers.addMarker(marker);
    //Add to array.
    arrMarkers.push(marker);
}

function RemovePlaneMarker(planeID){
    for(var x in arrMarkers){
        if(arrMarkers[x].PlaneID == planeID){

            //Remove from layer.
            markers.removeMarker(arrMarkers[x]); 
            //Remove from array.
            arrMarkers.splice(x, 1);
            return;
        }       
    }
}

To call them later on: 

function GetPlaneMarker(planeID){
    for(var x in arrMarkers){
        if(arrMarkers[x].PlaneID == planeID){
            return arrMarkers[x];
        }       
    }
}

var myPlaneMarker = GetPlaneMarker("AA2222");

Solution Update

<title>Open Street Map</title>
        <style type="text/css">
        html, body, #demo {
        position: absolute;
        left: 2%;
        width = 25%
        }
        html, body, #activePlanes {
        position: absolute;
        left: 2%;
        width = 25%
        }
        html, body, #mapBox {
        position: fixed;
        top: 0;
        right: 0;
        width: 75%;
        height: 100%;
        }
        </style>

        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <script type="text/javascript">

            var arrMarkers = [];
            var markers;

            function AddPlaneMarker(planeID, lonlat) {

                var marker = new OpenLayers.Marker(lonlat);
                marker.PlaneID = planeID;
                markers.addMarker(marker);
                arrMarkers.push(marker);

            }

            function RemovePlaneMarker(planeID) {
                for (var x in arrMarkers) {
                    if (arrMarkers[x].PlaneID == planeID) {

                        markers.removeMarker(arrMarkers[x]);
                        arrMarkers.splice(x, 1);

                        return;
                    }
                }
            }

            function GetPlaneMarker(planeID) {
                for (var x in arrMarkers) {
                    if (arrMarkers[x].PlaneID == planeID) {
                        return arrMarkers[x];
                    }
                }
            }

            function displayPlane() {
                var x = document.getElementById('planeList');
                var newPlane = document.createElement('option');
                newPlane.text = document.getElementById("plane_ID").value;
                if (newPlane.text == null || newPlane.text == "") {
                    alert("Please specify an Aircraft ID");
                }
                else {
                    try {
                        x.add(newPlane, x.newPlane[null]); // standards compliant; doesn't work in IE
                    }
                    catch (e) {
                        x.add(newPlane, null); // IE only
                    }
                    var lonLat = new OpenLayers.LonLat(document.getElementById("long").value, document.getElementById("lat").value).transform(
                new OpenLayers.Projection("EPSG:4326"),
                map.getProjectionObject());
                    var planeID = document.getElementById("plane_ID").value;
                    AddPlaneMarker(planeID, lonLat);
                }
            }

            function init() {
                map = new OpenLayers.Map("mapBox");
                map.addLayer(new OpenLayers.Layer.OSM());
                focusPoint = new OpenLayers.LonLat(-81.04818, 29.18710)
                focusPoint.transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter(focusPoint, 14);

                markers = new OpenLayers.Layer.Markers("Markers");
                map.addLayer(markers);
            }

            function newLonLat() {
                var newValues = prompt("Please specify new location of the Aircraft", "-81.07870 29.17210");
                var theValues = newValues.split(" ");
                var newPixel = map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new OpenLayers.LonLat(theValues[0], theValues[1]).transform(
            new OpenLayers.Projection("EPSG:4326"),
            map.getProjectionObject())));
                marker.moveTo(newPixel);
            }

            function removePlane() {
                var x = document.getElementById("planeList");
                var id = x.options[x.selectedIndex].value;
                x.remove(x.selectedIndex);
                RemovePlaneMarker(id);
            }
        </script>

        <body onload="init();">
        <div id="mapBox"></div>

        <br /><div id="demo">
        Aircraft ID: <input type="text" id="plane_ID" value="AA5024"/><br />
        Longitude: &nbsp;<input type="text" id="long" value="-81.04818" /><br />
        Latitude: &nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="lat" value="29.18710" /><br /><br />
        <dd>&nbsp;&nbsp;&nbsp;&nbsp;<button value="Add Aircraft" OnClick="displayPlane()">Add Aircraft</button></dd>
        <br /><br />
        <h3><dd>Active Planes</dd></h3>
        <select id="planeList" size="10" multiple="multiple" style="text-align:center" ondblclick="newLonLat()">
        <option>----------Plane ID----------</option>
        </select><br />
        <dd><button value="Remove Aircraft" OnClick="removePlane()">Remove Aircraft</button></dd>
        </div>
        </body>

这篇关于如何删除开发者中的特定标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆