2012-06-14 6 views
2

Это новый код с обновлением от capdragon, но теперь он не будет создавать маркеры. Я не знаю, как это исправить. Я думаю, что фрагмент кода был действительно умным способом исправить мою предыдущую проблему идентификации маркеров, и это, вероятно, очень маленькие вещи, которые мне сейчас не хватает. Любая помощь снова будет очень признательна.Как удалить определенный маркер в openlayer

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

ответ

3

markers и не похожи они доступны в рамках removePlane().

Попробуйте объявить их в глобальном масштабе и удаление var, когда вы их экземпляры .:

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

Обновление за комментарий:

Я на самом деле, как мой последний вариант лучше

Я бы отслеживайте их в массиве моих собственных объектов Plane, которые содержат ссылку на маркеры. Что-то вроде этого:

​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"); 

Другим вариантом было бы просто держать дорожки маркеров в массиве и магазине плоскость идентификатор в пределах этого маркера, как, например:

​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"); 

Решение 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> 
+0

Я уже сделал это, и в removePlane() Я добавил markers.removeMarker (маркер), который только что удалили последний маркер, созданный, но когда у меня есть, давайте скажем, 5 самолетов и хотел удалить второй, как мне сказать, я хочу удалить конкретный маркер – user1457145

+0

. Ссылка 'marker' в методе markers.removeMarker (marker)' продолжает перегружаться, когда вы создаете новый маркер с помощью 'marker = new OpenLayers .Marker (lonLat); 'Поэтому, чтобы удалить конкретный, вам нужно будет отслеживать их либо в массиве, либо делать что-то вроде' marker1 = new OpenLayers.Marker (lonLat); 'marker2 = ne w OpenLayers.Marker (lonLat); 'then' markers.removeMarker (marker1) 'удалит первый маркер, а markers.removeMarker (marker2)' удалит второй. – capdragon

+0

Это имеет смысл, но как я могу назвать отдельные маркеры, поскольку он вызывается из функции. В принципе, как я делаю то, что вы только что сказали. Если не «marker1», «marker2», я могу назвать эти маркеры как «markerAA5024», который является маркером + plane_ID или просто plane_ID, что упростит их позднее. – user1457145

Смежные вопросы