自动切换到其他地图类型在谷歌地图最大缩放级别(Auto switch to other mapTyp

2019-10-18 11:41发布

默认情况下,我的地图与MAXZOOM = 15地形地图类型。 我想映射到改变它的地图类型混合动力车(即具有MAXZOOM = 22)时自动用户尝试放大地图15级以上。

目前,我做到以下几点:

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

该解决方案不适合我,因为在这里我们失去的地形地图缩放= 15,我想改变地图类型只有在没有数据,此MapType在目前的水平。 但进一步放大到16级是在地形图禁用。

有没有办法做到这一点(重写MAXZOOM设定为16地形地图类型或使用自定义地图类型)?

Answer 1:

相当简单的解决方案是创建你自己根据地形和混合内置类型地图类型。 我们只是需要一个存在的map.mapTypes.get(“地形”)的MapType对象,并增加它的MAXZOOM设置,以后我们更换我们的编辑的对象地形地图类型。

这是基本的例子,说明如何创建和追加的自定义地图类型,以谷歌地图: https://developers.google.com/maps/documentation/javascript/examples/maptype-base 。

让我们考虑两个基本的地图类型:混合动力和地形,并建立它们自己的地图类型:

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事件和开关从一个地图类型到另一个时,地图是黑色的:

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方法一点点。 目前,当用户手动切换地图类型和当前缩放水平低于所设定的地图类型的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:

  1. 捕获的zoomControl可单击事件(您可能需要创建一个自定义zoomControl可作为Dr.Molle说),如果事件发生在变焦= 15更改地图类型和缩放。
  2. 捕捉到地图上的双击事件,如果事件发生在变焦= 15变化的地图类型和缩放。
  3. 捕获键盘事件缩小地图,如果出现这种情况,在变焦= 15变化的地图类型和缩放。

    每安德烈·迪翁更新:

  4. 您还需要监听滚轮事件,如果支持移动,捏/缩放手势。

(也可将缩放地图的任何其他行动将需要处理方式相同)



文章来源: Auto switch to other mapType on max zoom level in google maps