如何在小叶贴图多边形上触发事件？
如何在小叶贴图多边形上触发事件？
提问于 2012-07-11 04:08:57
我正在尝试弄清楚如何手动触发小叶多边形的事件(通过GeoJSON加载)。
简而言之，我有一个包含许多多边形的小叶贴图。我在地图之外也有一个常规的超链接，当点击它时，应该会触发一个特定多边形上的鼠标悬停事件(或任何事件)。
如何将ID分配给所有多边形，以便可以将超链接绑定到特定多边形的事件？或者这是最合乎逻辑的方式吗？
最终，我尝试创建一个包含大量多边形的地图，以及一个与每个多边形相关联的文本标签的HTML表。当单击HTML表格文本时，我希望触发地图多边形上的事件(反之亦然)。我只是不知道如何引用每个多边形。
这是我的非常简单的：
<body>
<div id="map" style="height: 550px; width:940px"></div>
<a href="#" id="testlink">Click to trigger a specific polygon mouseover event</a>
</body>这里的是我非常简化的JS:
$(document).ready(function () {
// build the map and polygon layer
function buildMap(data) {
var map = new L.Map('map');
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png',
cloudmadeAttribution = '',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
var mapLoc = new L.LatLng(43.675198,-79.383287);
map.setView(mapLoc, 12).addLayer(cloudmade);
var geojsonLayer = new L.GeoJSON(null, {});
geojsonLayer.on("featureparse", function (e){
// apply the polygon style
e.layer.setStyle(polyStyle);
(function(layer, properties) {
layer.on("mouseover", function (e) {
// change the style to the hover version
layer.setStyle(polyHover);
});
});
layer.on("mouseout", function (e) {
// reverting the style back
layer.setStyle(polyStyle);
});
layer.on("click", function (e) {
// do something here like display a popup
console.log(e);
});
})(e.layer, e.properties);
});
map.addLayer(geojsonLayer);
geojsonLayer.addGeoJSON(myPolygons);
}
// bind the hyperlink to trigger event on specific polygon (by polygon ID?)
$('#testlink').click(function(){
// trigger a specific polygon mouseover event here
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11421127
复制相关文章
相似问题