javascript - 如何在 map 容器的特定位置显示目标位置

Question

我创建了一个简单的 map ，如 Leaflet.js 教程中的示例所示:

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

现在，目标位置显示在 map 的中心。

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

Answer 1

使用 L.Map 的两个名为 latLngToContainerPoint 的实用方法可以轻松做到这一点。它是对应的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