LeafletJS,无法将弹出窗口绑定到第二个标记
LeafletJS, can't bind popup to second marker
我无法在使用 LeafletJS 时将弹出窗口绑定到第二个标记,第一个标记工作得很好,有什么帮助吗?这是我的 javascript 代码:
var map = L.map('mapScene', {
zoomControl: false,
attributionControl: false,
}).fitWorld();
var playerIcon = L.icon({
iconUrl: 'img/playermarker.png',
shadowUrl: 'img/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
var itemsIcon = L.icon({
iconUrl: 'img/crate.png',
shadowUrl: 'img/marker-shadow.png',
iconSize: [45, 46], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [10, 117], // the same for the shadow
popupAnchor: [1, -34],
});
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
minZoom: 14,
maxZoom: 14,
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
ext: 'png'
}).addTo(map);
var playerMarker;
function onLocationFound(e) {
var radius = e.accuracy / 2;
playerMarker = L.marker(e.latlng, {
icon: playerIcon
}).addTo(map).bindPopup("Hey i'm you!");
addMarkers();
}
function addMarkers(){
alert();
L.marker(playerMarker + 2, {
icon: itemsIcon
}).addTo(map).bindPopup("").on('popupopen', function() {
alert();
});
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({
setView: true,
maxZoom: 16
});
通过函数 "addMarkers()" 添加的第二个标记显示完美无缺,但 .bindpopup 根本不起作用。您可以单击标记但没有显示任何内容,也没有显示警报。
感谢@ghybs fiddle。这里有一个working fiddle。
我不知道您怎么会认为它可以与 playerMarker + 2
一起作为 latLng
使用,但看起来这是个错误。标记和整数之间的加法不起作用。
[编辑] 这是一段有趣的代码:
function onLocationFound(e) {
var radius = e.accuracy / 2;
playerMarker = L.marker(e.latlng).addTo(map).bindPopup("Hey i'm the first marker ");
addMarkers();
}
function addMarkers() {
//alert();
var ll = playerMarker.getLatLng();
var ll2 = L.latLng(ll.lat+12, ll.lng+12);
var mm = L.marker(ll2).addTo(map);
mm.bindPopup("Hey i'm the second marker");
}
我无法在使用 LeafletJS 时将弹出窗口绑定到第二个标记,第一个标记工作得很好,有什么帮助吗?这是我的 javascript 代码:
var map = L.map('mapScene', {
zoomControl: false,
attributionControl: false,
}).fitWorld();
var playerIcon = L.icon({
iconUrl: 'img/playermarker.png',
shadowUrl: 'img/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
var itemsIcon = L.icon({
iconUrl: 'img/crate.png',
shadowUrl: 'img/marker-shadow.png',
iconSize: [45, 46], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [10, 117], // the same for the shadow
popupAnchor: [1, -34],
});
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
minZoom: 14,
maxZoom: 14,
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: 'abcd',
ext: 'png'
}).addTo(map);
var playerMarker;
function onLocationFound(e) {
var radius = e.accuracy / 2;
playerMarker = L.marker(e.latlng, {
icon: playerIcon
}).addTo(map).bindPopup("Hey i'm you!");
addMarkers();
}
function addMarkers(){
alert();
L.marker(playerMarker + 2, {
icon: itemsIcon
}).addTo(map).bindPopup("").on('popupopen', function() {
alert();
});
}
function onLocationError(e) {
alert(e.message);
}
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({
setView: true,
maxZoom: 16
});
通过函数 "addMarkers()" 添加的第二个标记显示完美无缺,但 .bindpopup 根本不起作用。您可以单击标记但没有显示任何内容,也没有显示警报。
感谢@ghybs fiddle。这里有一个working fiddle。
我不知道您怎么会认为它可以与 playerMarker + 2
一起作为 latLng
使用,但看起来这是个错误。标记和整数之间的加法不起作用。
[编辑] 这是一段有趣的代码:
function onLocationFound(e) {
var radius = e.accuracy / 2;
playerMarker = L.marker(e.latlng).addTo(map).bindPopup("Hey i'm the first marker ");
addMarkers();
}
function addMarkers() {
//alert();
var ll = playerMarker.getLatLng();
var ll2 = L.latLng(ll.lat+12, ll.lng+12);
var mm = L.marker(ll2).addTo(map);
mm.bindPopup("Hey i'm the second marker");
}