自动切换到谷歌地图最大缩放级别的其他mapType [英] Auto switch to other mapType on max zoom level in google maps

问题描述

默认情况下，我的地图的地形类型为TERRAIN，maxZoom = 15。当用户尝试将地图缩放到15级以上时，我想要地图将它的mapType自动更改为HYBRID（即maxZoom = 22）。

目前我执行以下操作：

  google.maps.event （map.getZoom（）== 15）
 map.setMapTypeId（hybrid）; 
}）; 
  

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

有没有办法做到这一点（将maxZoom设置为16，然后使用自定义mapType）？

解决方案

相对简单的解决方案是基于地形和混合内置类型创建您自己的mapType。我们只需要一个现有的map.mapTypes.get（terrain）mapType对象并增加它的maxZoom设置，之后我们用我们编辑的对象替换地形mapType。

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

让我们考虑两个基本的mapType：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; 
 $ b map.mapTypes.set（terrain +，$。extend（{}，terrainMapType，{
 maxZoom：terrainMapType.maxZoom + terrainZoomAdd，
 maxZoomIncreased：terrainZoomAdd> 0 
}））; 
 $ b map.mapTypes.set（hybrid +，$。extend（{}，hybridMapType，{
 maxZoom：hybridMapType.maxZoom + hybridZoomAdd，
 maxZoomIncreased：hybridZoomAdd> 0 
}））; 
  

现在我们有自定义地图类型，其中一个可能会增加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; （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时，Google地图将缩放设置为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/ 。

By default my map has TERRAIN mapType with maxZoom=15. I want map to change it's mapType to HYBRID (that has maxZoom=22) automatically when user tries to zoom map above the 15 level.

Currently I do the following:

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

This solution does not suit me because here we loose terrain map zoom=15, and I want to change mapType only if there's no data for this mapType on the current level. But further zooming in to 16 level is disabled on terrain map.

Is there any way to do that (rewrite maxZoom setting to 16 for terrain mapType or use custom mapType)?

解决方案

Rather simple solution is to create Your own mapTypes based on the terrain and hybrid built-in types. We just take an existent map.mapTypes.get("terrain") mapType object and increase it's maxZoom setting, after that we replace terrain mapType with our edited object.

This is the basic example that shows how to create and append custom mapType to google maps: https://developers.google.com/maps/documentation/javascript/examples/maptype-base.

Let's consider two basic mapTypes: hybrid and terrain and build our own mapTypes on them:

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
}));

Now we have custom map types, one of them might have increased maxZoom value, and the map on this maxZoom level is black, because there's no actual data for it.

Let's subscribe for zoom_change event and switch from one MapType to another when map is black:

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+");
}

The last thing is to change built-in maptypeid_change method a little bit. Currently when user switches mapType manually and the current zoom level is greater than maxZoom of the mapType that is set, google maps sets zoom to the maxZoom and the map becomes black because there's no actual data.

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);
}

Here's the full code: http://jsfiddle.net/kasheftin/xJ2kQ/.

这篇关于自动切换到谷歌地图最大缩放级别的其他mapType的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！