Question

我在我的地图上使用了一个名为Leafpile的Leaflet和Leafleat插件。基本上它是来自数据库的结果集，该地图的javascript代码如下：

var cmAttr = '&copy; 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.openPopup（popup）方法或类似的？！）。

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

我尝试了一切但没有成功。我想在我的jQuery函数中绑定这个事件，比如：

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

Answer 1

我是stackoverflow的新手，但我找到了一个有效的解决方案。

您应首先创建一个空数组

var array =[]

位置数组应包含所有坐标。我在locationarray中填充了具有位置的对象，该属性具有相应的latlng值。

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]}]

然后用标记对象填充vararray。

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>')}

该函数应该除了numeric参数，并在vararray中的那个索引处调用openPopup（）

$.clicked = function(id){


vararray[id].openPopup()


}

我已经多次测试它并且它有效。所以，如果出现问题，请告诉我们。

Leaflet openPopup方法，点击地图外部

1 个答案: