gpt4 book ai didi

javascript - 从 map 外部单击的 Leaflet openPopup 方法

转载 作者:行者123 更新时间:2023-11-30 05:51:17 24 4
gpt4 key购买 nike

我在我的 map 上使用了一个名为 Leafpile 的 Leaflet 和 Leafleat 插件。基本上它是来自数据库的结果集,这张 map 的 javascript 代码如下:

var cmAttr = '© 2013 OpenStreetMap',
cmUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/{styleId}/256/{z}/{x}/{y}.png';

var minimal = L.tileLayer(cmUrl, {styleId: 1, attribution: cmAttr})

var southWest = new L.LatLng(3.8642546157214084, -199.86328125);
var northEast = new L.LatLng(73.12494524712693 , -24.08203125);
var bounds = new L.LatLngBounds(southWest, northEast);

var markers = new L.LeafpileGroup();
L.marker([40.91, -74.15]).bindPopup('The html content').addTo(markers),
L.marker([37.7, -121.90]).bindPopup('The html content').addTo(markers);

var map = L.map('map', {
center: [34.488616,-97.8692325],
minZoom: 4,
scrollWheelZoom: false,
zoom: 5,
layers: [minimal, markers]
});


map.setMaxBounds(bounds);

我遇到的问题是,当我单击 html 中的结果链接时,我想在 map 上打开一个弹出窗口(map.openPopup(popup) 方法或类似方法?!)。

<ul id="set">
<li><a href="#">RESULT #1</a></li>
<li><a href="#">RESULT #2</a></li>
</ul>

我已经尝试了所有方法,但没有成功。我想在我的 jQuery 函数中绑定(bind)这个事件,比如:

$(document.body).on("click",'#set a', function(e) {
//other code that I need
});

最佳答案

我是 stackoverflow 的新手,但我找到了一个有效且看起来足够高效的解决方案。

你应该先创建一个空数组

var array =[]

位置数组应包含您的所有坐标。我用具有相应 latlng 值的位置属性的对象填充 locationarray。

locationarray= [{name:"Hotel London",location:[51.5, -0.09]},{name:"Hotel Barnaby",location:[51.49, -0.088]},{name:"Hotel Rendelliare",location:[51.51, -0.12]},{name:"Hotel Francion",location:[51.52, -0.089]},{name:"Hotel Waterloo",location:[51.5, -0.11]}]

然后用标记对象填充可变数组。

for(i=0;i<locationarray.length;i++){

vararray[i] = L.marker(locationarray[i].location).addTo(map);
vararray[i].bindPopup('<div id="hotel'+i+'">' + locationarray[i].name + '</div>')

}

然后使用 for 循环创建您的 div。在 for 循环中,为 div 分配一个 onclick 处理程序或任何你想要触发函数的东西。将您用于迭代的值传递给函数。

for(i=0,len = objarray.length; i<len ;i++){
$('#viewportRS').append('<div onclick="$.clicked('+i+')" class="hotels" id="'+i+'">'+ whatevervar +'</div>')}

该函数应除数字参数外并在 vararray 中的该索引处调用 openPopup()

$.clicked = function(id){


vararray[id].openPopup()


}

我已经对其进行了多次测试并且它有效。因此,如果有任何问题,请告诉我们。

关于javascript - 从 map 外部单击的 Leaflet openPopup 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14731757/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com