Javascript 如何删除openlayer中的特定标记
这是capdragon更新的新代码,但现在它不会创建标记。我现在不知道怎么解决这个问题。 我认为代码片段是修复我以前识别标记的问题的一个非常聪明的方法,而且它可能是我现在缺少的一个非常小的东西。如果您能再次提供帮助,我们将不胜感激Javascript 如何删除openlayer中的特定标记,javascript,html,openlayers,markers,Javascript,Html,Openlayers,Markers,这是capdragon更新的新代码,但现在它不会创建标记。我现在不知道怎么解决这个问题。 我认为代码片段是修复我以前识别标记的问题的一个非常聪明的方法,而且它可能是我现在缺少的一个非常小的东西。如果您能再次提供帮助,我们将不胜感激 <title>Open Street Map</title> <style type="text/css"> html, body, #demo { position: absolut
<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: <input type="text" id="long" value="-81.04818" /><br />
Latitude: <input type="text" id="lat" value="29.18710" /><br /><br />
<dd> <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>
开放式街道地图
html,body,#demo{
位置:绝对位置;
左:2%;
宽度=25%
}
html,正文,#活动平面{
位置:绝对位置;
左:2%;
宽度=25%
}
html,正文,#映射框{
位置:固定;
排名:0;
右:0;
宽度:75%;
身高:100%;
}
var=[];
功能AddPlaneMarker(planeID,lonlat)
{
var markers=新的OpenLayers.Layer.markers(“markers”);
添加图层(标记);
var marker=新的OpenLayers.marker(lonlat);
marker.PlaneID=PlaneID;
标记。添加标记(标记);
arr标记。推(标记);
}
功能RemovePlaneMarker(planeID)
{
用于(ARR标记中的变量x)
{
if(arrMarkers[x].PlaneID==PlaneID)
{
3.拼接(x,1);
markers.removeMarker(arrMarkers[x]);
返回;
}
}
}
函数GetPlaneMarker(planeID)
{
用于(ARR标记中的变量x)
{
if(arrMarkers[x].PlaneID==PlaneID)
{
返回标记[x];
}
}
}
函数displayPlane()
{
var x=document.getElementById('planeList');
var newPlane=document.createElement('option');
newPlane.text=document.getElementById(“平面ID”).value;
if(newPlane.text==null | | newPlane.text==“”)
{
警报(“请指定飞机ID”);
}
其他的
{
尝试
{
x、 add(newPlane,x.newPlane[null]);//符合标准;在IE中不起作用
}
捕获(e)
{
x、 add(newPlane,null);//仅限IE
}
var lonLat=new OpenLayers.lonLat(document.getElementById(“long”).value,document.getElementById(“lat”).value)。转换(
新OpenLayers.投影(“EPSG:4326”),
getProjectionObject());
var planeID=document.getElementById(“平面ID”);
AddPlaneMarker(planeID,lonLat);
}
}
函数init()
{
map=新的OpenLayers.map(“mapBox”);
addLayer(新的OpenLayers.Layer.OSM());
focusPoint=新OpenLayers.LonLat(-81.04818,29.18710)
transform(新的OpenLayers.Projection(“EPSG:4326”),map.getProjectionObject();
地图设置中心(焦点,14);
}
函数newLonLat()
{
var newValues=提示(“请指定飞机的新位置”,“-81.07870 29.17210”);
var theValues=newValues.split(“”);
var newPixel=map.getLayerPxFromViewPortPx(map.getPixelFromLonLat(new OpenLayers.LonLat)(theValues[0],theValues[1])。转换(
新OpenLayers.投影(“EPSG:4326”),
getProjectionObject());
marker.moveTo(新像素);
}
函数removePlane()
{
var x=document.getElementById(“planeList”);
x、 移除(x.selectedIndex);
var planeID=x.options[x.selectedIndex]。文本;
移除平面标记(planeID);
}
飞机识别号:
经度:
纬度:
添加飞机
活动平面
----------平面ID----------
移走飞机
标记
和标记
看起来不在removePlane()
的范围内
尝试在全局范围内声明它们,并在实例化它们时删除var
:
...
var标记,标记;
...
函数displayPlane()
...
markers=新的OpenLayers.Layer.markers(名称);
...
marker=新的OpenLayers.marker(lonLat);
...
根据评论更新:
实际上我最喜欢我最后的选择
我会在我自己的平面对象数组中跟踪它们,其中包含对标记的引用。大概是这样的:
var arrPlaneObjects=[];
功能AddPlaneMarker(planeID,lonlat){
var objPlane={};
objPlane.ID=平面ID;
objPlane.Marker=新的OpenLayers.Marker(lonLat);
//添加到图层。
markers.addMarker(objPlane.Marker);
//添加到数组中。
arrplane对象。推送(objPlane);
}
功能RemovePlaneMarker(planeID){
用于(对象中的变量x){
if(arrPlaneObjects[x].ID==planeID){
//从阵列中删除。
arrplane对象。拼接(x,1);
//从图层中删除。
markers.removeMarker(arrPlaneObjects[x].Marker);
返回;
}
}
}
然后,您可以使用此选项轻松添加和删除标记:
另一种选择是只跟踪阵列中的标记,并将平面id存储在该标记中,如下所示:
var arrMarkers=[];
功能AddPlaneMarker(planeID,lonlat){
var marker=新的OpenLayers.marker(lonLat);
marker.PlaneID=PlaneID;
//添加到图层。
标记。添加标记(标记);
//添加到数组中。
arr.push(毫安)
AddPlaneMarker("AA5024", lonLat);
RemovePlaneMarker("AA2222");
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: <input type="text" id="long" value="-81.04818" /><br />
Latitude: <input type="text" id="lat" value="29.18710" /><br /><br />
<dd> <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>