我使用 MapKit.js 创建了以下 map ,其中包含数百个自定义注释、聚类(黄点)和注释点击时的标注弹出窗口。
单击弹出链接时,我想做的只是放大一步并将 View 集中在单击的注释上(在响应上下文中)。
在我习惯的 Google map 中,您只需按 map 的中心和缩放级别定位 map 。
在 MapKit.js 中,您使用中心/区域组合,老实说我不明白这是如何工作的。
我不清楚官方文档,我找不到真正有启发性的资源。
如果有人可以向我解释我们应该如何使用中心/区域组合来管理缩放级别,我将不胜感激。
谢谢:-)
[编辑]
这个中心/区域的东西对我来说仍然没有意义,所以我决定用缩放功能覆盖 MapKit.js。
感谢this post ,我已经设法实现了缩放计算,这似乎没问题。
我现在需要实现设置的缩放操作。
还没有成功,这个数学的东西到此为止^^
非常欢迎任何帮助:-)
功能:
function MapKitJsZoom(map) {
var LN2 = 0.6931471805599453; // ???
var WH = 256; // World Height
var WW = 256; // World Width
var MAX = 21; // Max zoom level
// GET CURRENT ZOOM.
var latToRad = function (lat) {
var sin = Math.sin(lat * Math.PI / 180);
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
};
var zoom = function (mapPx, worldPx, fraction) {
return (Math.log(mapPx / worldPx / fraction) / LN2);
};
this.get = function () {
var bounds = map.region.toBoundingRegion();
var latFraction = (latToRad(bounds.northLatitude) - latToRad(bounds.southLatitude)) / Math.PI;
var latZoom = zoom(map.element.clientHeight, WH, latFraction);
var lngDiff = bounds.eastLongitude - bounds.westLongitude;
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
var lngZoom = zoom(map.element.clientWidth, WW, lngFraction);
return Math.round(Math.min(latZoom, lngZoom, MAX));
};
// SET CURRENT ZOOM
this.set = function (zoom) {
// TODO
// I need to calculate latitude and longitude deltas
// that correspond to required zoom based on viewport size
// (map.element.clientWidth and map.element.clientHeight)
map.region.span = new mapkit.CoordinateSpan(latitudeDelta, longitudeDelta);
};
}
用法:
var map = new mapkit.Map("map");
map.zoom = new MapKitJsZoom(map);
map.addEventListener('region-change-end', function () {
console.log(map.zoom.get());
});
最佳答案
有两种方法可以实现:
1) 设置中心然后改变缩放级别
var newCenter = new mapkit.Coordinate(37.792446, -122.399360);
map._impl.zoomLevel--;
map.setCenterAnimated(newCenter, true);
2) 使用中心和跨度设置区域(递增)
var newCenter = new mapkit.Coordinate(37.792446, -122.399360);
var span = new mapkit.CoordinateSpan(.01);
var region = new mapkit.CoordinateRegion(newCenter, span);
map.setRegionAnimated(region)
关于javascript - MapKit.js 中的缩放和位置管理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56457065/