时间戳

首页 > 解决方案 > mapkit.js：如何实现注解选中和取消选中时的放大缩小

javascript - mapkit.js：如何实现注解选中和取消选中时的放大缩小

问题描述

我正在使用 JavaScript 为我的网站实现苹果地图。我的网站显示了许多附近的酒店以进行搜索位置查询。所以如果你搜索金门大桥，它会绘制出近60-70家附近的酒店，用户可以点击获取特定酒店的信息。我想要实现的是当用户单击注释时，地图应该放大到该注释，一旦用户返回，这应该缩小到以前的缩放级别，以便所有标记都应该可见。

此外，对于登陆页面，我已将区域设置为旧金山，但我的地图设置在中东。

这是我的代码

$(document).ready(function){

    //this is the first code which is landing me in middle east
    map = new mapkit.Map("map");
    var coord = new mapkit.Coordinate(37.3382082,-121.8863286);
    var zoomlevel = new mapkit.CoordinateSpan(.001);
    var zoomOut = new mapkit.CoordinateSpan(0.004);
    var region = new mapkit.CoordinateRegion(coord, zoomlevel);
    map.setRegionAnimated(region);

    //when click on annotaion
    var coordinate  = data.coordinate; //data would be hotel data
    var region = new mapkit.CoordinateRegion(coordinate, zoomlevel);
    map.setRegionAnimated(region);

    // when going back
    var selectedCordinate   = map.selectedAnnotation.coordinate;
    var region = new mapkit.CoordinateRegion(selectedCordinate, zoomOut);
    map.setRegionAnimated(region);
 });

放大正在发生，但是当我将其设置为 0.004 时缩小时，每个区域的行为都不同。如果我在地图上有很多标记，那么它的行为会有所不同，但如果我的标记较少，那么它的行为就会完全不同。我想要一种动态解决方案，以便它适用于所有类型的区域。

标签： javascriptjquerymapkitapple-mapsmapkitannotation

解决方案

推荐阅读