- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这是来自 capdragon 的更新的新代码,但现在它不会创建标记。我现在不知道如何解决这个问题。我认为代码片段是解决我之前识别标记的问题的一种非常聪明的方法,它可能是我现在缺少的一个非常小的东西。再次提供任何帮助将不胜感激。
<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>
最佳答案
markers
和 marker
看起来它们不在 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");
另一种选择是只跟踪数组中的标记并将平面 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: <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>
关于javascript - 如何删除openlayer中的特定标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11040312/
popup 和 Frame 和 FrameColud 有什么区别? 而且,似乎弹出窗口的方向取决于标记相对于 map 的位置。流行音乐可能在标记上方或下方。 例如: 上图: 下面: 现在,我想知道如何
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我一直在使用 OpenLayers,我做了一个层树(所有层都是矢量图层),所有这些层都有特征,我想要的是通过选择控件选择这些特征。 我制作了选择功能控件,但问题是当我关闭其中一个图层时(我正在从 ma
关于即将发布的 OpenLayers 6 的快速问题。有谁知道 OpenLayers 5 和 OpenLayers 6 之间的主要区别是什么。我读了一些 here但出现了其他问题: OpenLayer
所以我使用了一个单个矢量图层,我把我所有的: 积分 折线 多边形 这是我的代码: var source = new ol.source.Vector({ wrapX: false }); var ve
我是用 wkt 添加矢量图层的使用以下代码映射的源: var SelectVector = null; for (var i = 0; i < wktarray.length; i++) {
我正在尝试简化我的应用程序,并想知道 OpenLayers 何时物理调用 WMS 服务器?此外,层可见性是否也在调用中起作用? 实例化一个层时会发生吗 var layer = new OpenLaye
对于群集功能,我想在OL3中制作以下样式: 一个正方形,在其顶部,在右上角还有另一个较小的正方形。较大的正方形将保留符号,而较小的正方形将保留聚类要素的数量。 类似于this 有可能实现这一目标吗?在
我正在尝试在 OpenLayers map 上绘制一个代表实体的图标,其中包括一条“速度领导者”,这是一条从图标开始并沿实体移动方向向外绘制的小线段。线的长度表示实体的速度。 我遇到的问题是我希望线的
我正在使用 openlayers,当我从服务器查询 pois 列表时,我想为每个添加到 map 中。 所以我为它们中的每一个都创建了标记,并且我希望在单击标记时打开一个 FrameCloud。 我用这
OpenLayers 2具有非常有用的map.zoomToExtent(extent)功能。 OpenLayers 3中有类似的东西吗?我可以使用source.getExtent()获得感兴趣的范围,
ol5最近发布了,但我仍在使用ol4。他们网站上的所有链接都指向最新的文档,但我需要 4.6.5 的文档。有谁知道它在哪里吗? 最佳答案 https://openlayers.org/en/v4.6.
我想让用户在 map 上添加自定义标记以及每个标记的描述。任何提示、任何教程的链接都会非常有用。 最佳答案 您可以注册一个函数来在 map 上“点击”事件。当用户点击它时,标记会自动添加。 尝试这样的
我对这个 openlayers map 完全感到困惑。即使有很多示例和 wiki,我也找不到如何重用它。我的意思是我想显示我的城市 map ,管理员可以管理,管理员可以添加点和位置,它应该显示在前端。
我对网络制图非常非常陌生。我有一个由 PostGis 数据库的形状文件制作的 OpenLayers map ,有一个矢量图层,它有默认样式(GeoServer SLD),但我想在用户单击刷新按钮时更改
我是 OpenLayers 的新手,我必须开发一个使用它的离线应用程序。我已经下载了 OL 3.7.0 并设置了一个测试 html 文件,该文件通过以下方式加载 OL javascript 文件:
我将我的 openlayer map 集成到一个带有圆角的 div 中。我怎样才能让 map 有圆角?我曾尝试将 border-radius 应用于开发人员工具中的许多 div,但 map 拒绝圆角。
在我们的应用程序中,我们希望从“CanvasMap”上的标记/功能到外部世界(任何接受该类型拖放操作的 HTML 目标)启动 native (HTML) 拖放操作。 想象一下,我们在 CanvasMa
在 Openlayers v2 中,我可以添加如下符号: OpenLayers.Renderer.symbol.pointToIcon = [100, 70, 20, 50, 42, 70, 20,
我在 map 上有一些功能,在我移动它们之后,使用 var point = new OpenLayers.LonLat(newlon, newlat); point.transform(epsg432
我是一名优秀的程序员,十分优秀!