Question

默认情况下，我的地图有TERRAIN mapType，maxZoom = 15。当用户尝试将地图缩放到15级以上时，我希望地图将其mapType更改为HYBRID（具有maxZoom = 22）。

目前我执行以下操作：

google.maps.event.addListener(map,"zoom_changed",function() {
  if (map.getZoom() == 15)
    map.setMapTypeId("hybrid");
});

这个解决方案不适合我，因为这里我们松散地形图zoom = 15，我想只在当前级别没有此mapType的数据时更改mapType。但是在地形图上禁用了进一步放大到16级。

有没有办法做到这一点（对于terrain mapType重写maxZoom设置为16或使用自定义mapType）？

Answer 1

相当简单的解决方案是根据terrain和混合内置类型创建自己的mapTypes。我们只需要存在一个map.mapTypes.get（“terrain”）mapType对象并增加它的maxZoom设置，之后我们用我们编辑的对象替换terrain mapType。

这是显示如何创建自定义mapType并将其附加到Google地图的基本示例：https://developers.google.com/maps/documentation/javascript/examples/maptype-base。

让我们考虑两个基本的mapTypes：hybrid和terrain，并在它们上构建我们自己的mapTypes：

var terrainMapType = map.mapTypes.get("terrain");
var hybridMapType = map.mapTypes.get("hybrid");
var terrainZoomAdd = terrainMapType.maxZoom<hybridMapType.maxZoom?1:0;
var hybridZoomAdd = terrainMapType.maxZoom<hybridMapType.maxZoom?0:1;

map.mapTypes.set("terrain+",$.extend({},terrainMapType,{
  maxZoom: terrainMapType.maxZoom + terrainZoomAdd,
  maxZoomIncreased: terrainZoomAdd>0
}));

map.mapTypes.set("hybrid+",$.extend({},hybridMapType,{
  maxZoom: hybridMapType.maxZoom + hybridZoomAdd,
  maxZoomIncreased: hybridZoomAdd>0
}));

现在我们有自定义地图类型，其中一个可能会增加maxZoom值，并且此maxZoom级别的地图为黑色，因为没有实际数据。

让我们订阅zoom_change事件，并在地图为黑色时从一个MapType切换到另一个：

var onZoomChange = function() {
  var mapTypeTerrain = map.mapTypes.get("terrain+");
  var mapTypeHybrid = map.mapTypes.get("hybrid+");
  var maxZoomTerrain = mapTypeTerrain ? mapTypeTerrain.maxZoom : 0;
  var maxZoomHybrid = mapTypeHybrid ? mapTypeHybrid.maxZoom : 0;
  if (map.getMapTypeId() == "terrain+" && map.getZoom() == maxZoomTerrain && maxZoomTerrain<maxZoomHybrid)
    map.setMapTypeId("hybrid+");
  if (map.getMapTypeId() == "hybrid+" && map.getZoom() == maxZoomHybrid && maxZoomHybrid<maxZoomTerrain)
    map.setMapTypeId("terrain+");
}

最后一件事是稍微改变内置的maptypeid_change方法。目前，当用户手动切换mapType并且当前缩放级别大于设置的mapType的maxZoom时，谷歌地图将缩放设置为maxZoom，并且地图变为黑色，因为没有实际数据。

var onMapTypeIdChange = function() {
  var mapType = map.mapTypes.get(map.getMapTypeId());
  if (!mapType) return;
  if (mapType.maxZoomIncreased && map.getZoom() >= mapType.maxZoom)
    map.setZoom(mapType.maxZoom-1);
}

以下是完整代码：http://jsfiddle.net/kasheftin/xJ2kQ/。

Answer 2

捕捉zoomControl上的click事件（您可能需要像Dr.Molle所说的那样制作自定义zoomControl），如果事件发生在zoom = 15，则更改mapType并缩放。
捕获地图上的双击事件，如果事件发生在zoom = 15，则更改mapType并缩放。
捕获键盘事件以缩放地图，如果在zoom = 15时发生这种情况，请更改mapType并进行缩放。
每个安德烈·迪翁的更新：
您还需要收听滚轮事件以及是否支持移动，捏合/缩放手势。

（还有任何其他可以缩放地图的动作都需要以相同的方式处理）

在谷歌地图中自动切换到最大缩放级别的其他mapType

2 个答案: