如何在地图容器的特定位置显示目标位置

Question

我创建了一个简单的地图，就像 Leaflet.js 教程中的这个例子：

var map=L.map('map').setView([51.505,-0.09], 13);

现在，目标位置显示在地图的中央。

我的地图容器大小为 600x400 像素。如何实现在容器内的自定义位置显示给定目标？假设我希望该位置显示为水平居中，但距顶部 50 像素。

Answer 1

这很容易使用 L.Map 的两个实用方法 latLngToContainerPoint and it's counterpart containerPointToLatLng。

// Get LatLng position of the marker
var oldLatLng = marker.getLatLng();
// Convert LatLng to containerpoint in pixels.
var oldPoint = map.latLngToContainerPoint(oldLatLng);
// Calculate new point 
var newPoint = L.point(oldPoint.x, oldPoint.y + (oldPoint.y - 50));
// Convert point to LatLng
var newLatLng = map.containerPointToLatLng(newPoint);
// Set new map view
map.setView(newLatLng);

这是一个关于 Plunker 的工作示例：http://plnkr.co/edit/8y5Klz?p=preview

如何在地图容器的特定位置显示目标位置

How to show the target location at a particular position of the map container

javascript

leaflet