【问题标题】：how to remove a specific marker in openlayer如何在openlayer中删除特定标记
【发布时间】：2012-06-14 19:47:47
【问题描述】：

这是来自 capdragon 更新的新代码，但现在它不会创建标记。我现在不知道如何解决这个问题。我认为代码 sn-p 是解决我之前识别标记的问题的一种非常聪明的方法，它可能是我现在缺少的一个非常小的东西。再次提供任何帮助将不胜感激。

<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>

【问题讨论】：

标签： javascript html openlayers markers

【解决方案1】：

markers 和 marker 看起来好像不在 removePlane() 的范围内。

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

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

根据评论更新：

其实我最喜欢我的最后一个选项

~~我会在我自己的包含对标记的引用的平面对象数组中跟踪它们。像这样：~~

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;
        }       
    }
}

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

AddPlaneMarker("AA5024", lonLat);

RemovePlaneMarker("AA2222");

另一种选择是只跟踪数组中的标记并将平面 ID 存储在该标记中，如下所示：

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;
        }       
    }
}

稍后给他们打电话：

function GetPlaneMarker(planeID){
    for(var x in arrMarkers){
        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;
        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>

【讨论】：

我已经这样做了，在 removePlane() 中我添加了刚刚删除的最后一个标记创建的标记。我怎么告诉它，我想删除特定标记
markers.removeMarker(marker) 中的 marker 引用在您使用 marker = new OpenLayers.Marker(lonLat); 创建新标记时不断被覆盖，因此要删除特定标记，您需要在数组或数组中跟踪它们通过执行marker1 = new OpenLayers.Marker(lonLat); marker2 = new OpenLayers.Marker(lonLat); 之类的操作，markers.removeMarker(marker1) 将删除第一个标记，markers.removeMarker(marker2) 将删除第二个。
这是有道理的，但是我如何命名单个标记，因为它是从函数调用的。基本上，我该怎么做你刚才说的。如果不是“marker1”、“marker2”，我可以将这些标记命名为“markerAA5024”，即marker+plane_ID 或只是plane_ID，这样以后更容易调用。
区分大小写的错字：var marker = new OpenLayers.Marker(lonLat); 应该是 lonlat 而不是 lonLat
你先生，是个了不起的人。感谢您的帮助