1

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

目前我执行以下操作：

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

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

有没有办法做到这一点（将地形mapType的maxZoom设置重写为16或使用自定义mapType）？

4

2 回答 2

1

相当简单的解决方案是根据地形和混合内置类型创建自己的地图类型。我们只需要一个现有的 map.mapTypes.get("terrain") mapType 对象并增加它的 maxZoom 设置，然后我们用我们编辑的对象替换地形 mapType。

这是显示如何创建自定义 mapType 并将其附加到谷歌地图的基本示例：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 事件并在地图为黑色时从一种 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/。

于 2013-08-09T13:09:55.843 回答
0

  1. 捕获 zoomControl 上的单击事件（您可能需要按照 Dr.Molle 所说的那样制作自定义 zoomControl），如果事件发生在 zoom=15 时，请更改 mapType 和缩放。

  2. 捕获地图上的双击事件，如果事件发生在 zoom=15 时，请更改 mapType 和缩放。

  3. 捕获键盘事件以缩放地图，如果在 zoom=15 时发生这种情况，请更改 mapType 和缩放。

    安德烈·迪翁更新：

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

（也需要以相同的方式处理任何其他会缩放地图的操作）

于 2013-08-08T12:55:18.110 回答