Cra*_*ell 2 javascript leaflet
我正在尝试获取动态添加到地图的标记的边界。我的目标是动态地将标记添加到地图中,并使视图自动缩放以适合地图上所有标记的边界。以下是我当前的代码以及迄今为止我所尝试过的:
起点是经纬度数组:
该网页提供了用户可以选择和取消选择的地址和复选框的列表。选择所需的地址后,用户可以单击地图上的视图,标记将出现在地图上(这工作正常,我只是无法将视图缩放到这些标记的边界)
我有一个循环,为每个检查的地址提取纬度和经度并将其推入数组中,如下所示:
latLng.push(42.9570316,-86.04564429999999);
latLng.push(43.009381,-85.890041);
Run Code Online (Sandbox Code Playgroud)
...这是一个循环,因此它始终包含所需数量的值并输出:
latLng = [42.9570316,-86.04564429999999,43.009381,-85.890041,43.11996200000001,-85.42854699999998,43.153376,-85.4730639,42.8976947,-85.88893200000001];
var thisLatLng = L.latLng(latLng);
console.log(thisLatLng); // this returns Null
mymap.fitBounds(group); // returns Error: Bounds are not Valid
mymap.fitBounds(group.getBounds()); // returns group.getBounds() is not a function
Run Code Online (Sandbox Code Playgroud)
我也尝试过以此作为起点:
latlng.push(L.marker([42.9570316,-86.04564429999999]));
latlng.push(L.marker([43.009381,-85.890041]));
Run Code Online (Sandbox Code Playgroud)
...这包含在一个循环中,该循环会产生以下输出
latLng = [L.marker([42.9570316,-86.04564429999999]),L.marker([43.009381,-85.890041]),L.marker([43.11996200000001,-85.42854699999998]),L.marker([43.153376,-85.4730639]),L.marker([42.8976947,-85.88893200000001])];
console.log(latLng); // this returns makrers with the correct lat & lng above
var group = new L.featureGroup(latLng);
console.log(group); //this returns a Null featureGroup
mymap.fitBounds(group); // returns Error: Bounds are not valid
mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not valid
Run Code Online (Sandbox Code Playgroud)
我不知道如何进行这项工作,我已经尝试了 stackoverflow 上发布的几个答案,并尝试尝试遵循文档,但似乎没有给出预期的结果。
更新
我删除了latLng.push(L.marker([42.9570316,-86.04564429999999]));循环并替换为以下内容:
我创建了一个功能组,var group = new L.featureGroup();然后在循环中向其添加标记,方法是marker.addTo(group);按照我的预期将所有标记推送到功能组中,但无法获得边界。
mymap.fitBounds(group.getBounds()); // returns Error: Bounds are not valid
Run Code Online (Sandbox Code Playgroud)
这是输出的console.log(group);内容:
我一点也不这么认为
latLng = [L.marker([42.9570316,-86.04564429999999]),L.marker([43.009381,-85.890041]),L.marker([43.11996200000001,-85.42854699999998]),L.marker([43.153376,-85.4730639]),L.marker([42.8976947,-85.88893200000001])];
Run Code Online (Sandbox Code Playgroud)
能行得通。在传单中,您不能只创建一个变量并说它是一个标记对象。你需要使用类似的方法L.marker()
您需要做的是创建一个标记并将其添加到featureGroup
var group = new L.featureGroup();
for (var i = 0; i < yourMarkers.length; i++) {
L.marker([51.5, -0.09]).addTo(group);
}
map.fitBounds(group.getBounds());
Run Code Online (Sandbox Code Playgroud)
group现在将包含多个标记。
你也可以尝试这个:
var coordinates = new Array();
for (var i = 0; i < yourMarkers.length; i++) {
var marker = L.marker([51.5, -0.09]);
coordinates.push(marker);
}
var group = new L.featureGroup(coordinates);
map.fitBounds(group.getBounds());
Run Code Online (Sandbox Code Playgroud)
更新
相关函数是这个:
function showResult(lat, lng) {
var marker = L.marker([lat, lng])
.bindPopup('yourPopup').on("popupopen", onPopupOpen).addTo(group);
map.addLayer(group);
map.fitBounds(group.getBounds());
}
Run Code Online (Sandbox Code Playgroud)
你只需要添加fitBounds()里面的内容就可以了。
| 归档时间: |
|
| 查看次数: |
6144 次 |
| 最近记录: |