如何从地图之外与Leaflet标记层进行交互？
如何从地图之外与Leaflet标记层进行交互？
我有一份传统地图，上面显示了公共艺术品的位置，该地图是从GeoJSON数据渲染而来的。在地图旁边，我创建了一个来自相同的GeoJSON数据的艺术品列表，并希望能够在地图外点击列表项时，弹出与之相关的标记的弹出窗口。
如何通过点击事件将列表项链接到它们各自的标记？
我的map.js文件如下：
var map;
var pointsLayer;
$(document).ready(function () {
map = new L.Map('mapContainer');
var url = 'http://{s}.tiles.mapbox.com/v3/mapbox.mapbox-streets/{z}/{x}/{y}.png';
var copyright = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';
var tileLayer = new L.TileLayer(url, {
attribution: copyright
});
var startPosition = new L.LatLng(41.883333, - 87.633333);
map.on('load', function (e) {
requestUpdatedPoints(e.target.getBounds())
});
map.setView(startPosition, 13).addLayer(tileLayer);
map.on('moveend', function (e) {
requestUpdatedPoints(e.target.getBounds())
})
});
function requestUpdatedPoints(bounds) {
$.ajax({
type: 'GET',
url: '/SeeAll',
dataType: 'json',
data: JSON.stringify(bounds),
contentType: 'application/json; charset=utf-8',
success: function (result) {
parseNewPoints(result);
addToList(result)
},
error: function (req, status, error) {
alert('发生了什么？你失去了与服务器的连接吗？')
}
})
}
function addToList(data) {
for (var i = 0; i < data.features.length; i++) {
var art = data.features[i];
$('div#infoContainer').append('' + '' + '' + art.properties.wrknm + '' + '
' + art.properties.location + '' + '' + art.properties.img_src + '' + '
' + '')
}
$('a.list-link').click(function (e) {
alert('现在你看到了点击列表项时会发生什么！');
e.preventDefault()
})
}
function parseNewPoints(data) {
if (pointsLayer != undefined) {
map.removeLayer(pointsLayer)
}
pointsLayer = new L.GeoJSON();
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#FF6788",
color: "YELLOW",
weight: 1,
opacity: 1,
fillOpacity: 0.5
};
L.geoJson(data, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions)
},
onEachFeature: function (feature, pointsLayer) {
pointsLayer.bindPopup(feature.properties.img_src + "
" + feature.properties.wrknm + "
" + feature.properties.artist + "
" + feature.properties.location + '' + feature.properties.descfin + '')
}
}).addTo(map)
}