Javascript 传单JS弹出窗口位置和标记添加和删除问题
我正在使用JSAPI实现在openstreetmaps上显示位置。下面是一个场景,当页面加载一个JS函数时,该函数将被触发,它将查询DB以获取所有设备的当前位置,并将它们显示为地图上的标记。我在it领域面临两大问题: -->我正在尝试将弹出窗口与每个标记绑定,以使其具有描述性。换句话说,用户应该知道这个标记用于什么设备。问题是,弹出窗口显示在标记上,使标记不可见。以下是截图: 标记如下所示(关闭一个弹出窗口后): -->在此页面上,我在表中显示设备名称。此表的第一列为复选框。当用户检查设备时,其标记会按预期显示在地图上(工作正常)。之后,如果用户取消选中该设备,则其标记将消失。但当用户再次选择该设备时,其标记不会出现 这是我的密码:Javascript 传单JS弹出窗口位置和标记添加和删除问题,javascript,html,openstreetmap,leaflet,Javascript,Html,Openstreetmap,Leaflet,我正在使用JSAPI实现在openstreetmaps上显示位置。下面是一个场景,当页面加载一个JS函数时,该函数将被触发,它将查询DB以获取所有设备的当前位置,并将它们显示为地图上的标记。我在it领域面临两大问题: -->我正在尝试将弹出窗口与每个标记绑定,以使其具有描述性。换句话说,用户应该知道这个标记用于什么设备。问题是,弹出窗口显示在标记上,使标记不可见。以下是截图: 标记如下所示(关闭一个弹出窗口后): -->在此页面上,我在表中显示设备名称。此表的第一列为复选框。当用户检查设备时
function OnPageLoad() {
var IDs = GetAllSelectedDeviceIDs();
LoadOpenStreetMap(IDs);
}
var map;
var markers = new Array();
function LoadOpenStreetMap(deviceIDs) {
for (var i = 0; i < deviceIDs.length; i++) {
$.ajax({
url: "../Database/getcurrentlocation.php",
cache: false,
type: "post",
data: "deviceId=" + deviceIDs[i] + "&r=" + Math.random(),
dataType: "html",
async: false,
success: function (data) {
if (data != null) {
var dataArray = data.split(/~/);
SetOpenStreetMap(dataArray[0], dataArray[1], deviceIDs[i], i, flags[i]);
}
}
});
}
deviceIDs = GetAllSelectedDeviceIDs();
setTimeout(function () { LoadOpenStreetMap(deviceIDs); }, 500);
}
function SetOpenStreetMap(lati, longi, deviceID, markerIndex, markerFlag) {
if (!map) {
map = L.map('map').setView([lati, longi], 12);
L.tileLayer('http://{s}.tile.cloudmade.com/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX/997/256/{z}/{x}/{y}.png', {
attribution: '',
maxZoom: 18
}).addTo(map);
}
if (markerFlag == 1) {
//need to add marker
if (!markers[markerIndex]) {
var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup.';
popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);
markers[markerIndex] = L.marker([lati, longi]).addTo(map);
markers[markerIndex].bindPopup(popupContent1);
map.addLayer(popup1);
}
else
markers[markerIndex].setLatLng([lati, longi]).update();
}
else {
//need to remove marker
if (markers[markerIndex]) {
map.removeLayer(markers[markerIndex]);
}
}
}
函数OnPageLoad(){
var id=getAllSelectedDeviceID();
LoadOpenStreetMap(IDs);
}
var映射;
var markers=新数组();
函数加载OpenStreetMap(DeviceID){
对于(变量i=0;i
任何帮助都将不胜感激
谢谢。要将弹出窗口放置在带有一些偏移的标记上,存在一个偏移属性:
if (markerFlag == 1) { //need to add marker
if (!markers[markerIndex]) {
var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup.';
popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);
popup1.offset = new L.Point(0, -20);
markers[markerIndex] = L.marker([lati, longi]).addTo(map);
/* markers[markerIndex].bindPopup(popupContent1); */
map.addLayer(popup1);
} else
markers[markerIndex].setLatLng([lati, longi]).update();
}
要在标记上显示弹出窗口,只需调用标记上的
bindpoop
方法。
如图所示
您不需要自己实例化弹出窗口。创建弹出窗口时,在options对象内设置偏移量
var options = {
offset: new L.Point(1, -20)
};
var popup = L.popup(options)
.setLatLng([ lat, lng ])
.setContent('Your popup content goes here!')
.openOn(map)
;
“选项”对象是传递给L.popup()的第一个对象。@lhsan感谢您的回复。你能进一步解释一下我怎样才能把弹出窗口的纬度降低一两秒吗?@lhsan我添加弹出窗口的方式正是你上面提到的。但这种方法的问题是,它允许一次弹出一个标记。我需要在页面加载时显示所有标记的弹出窗口。@lhsan不工作。弹出窗口出现在与以前相同的位置上。您是否检查过传单的版本?看这里:特别是偏置道具。如果没有任何变化。我很抱歉。这就是我所能做的。她希望所有弹出窗口同时可见,这不是bindPopup行为。@Ihsan我没有尝试过,但这应该取决于绑定后如何打开它。使用marker.bindPopup('content')创建弹出窗口。addTo(map)您找到第二个问题的解决方案了吗?关于不重新加载标记的部分?