かなり単純な解決策は、地形とハイブリッドの組み込みタイプに基づいて独自の mapTypes を作成することです。既存の map.mapTypes.get("terrain") mapType オブジェクトを取得し、その maxZoom 設定を増やしてから、地形 mapType を編集したオブジェクトに置き換えます。
これは、カスタム mapType を作成して Google マップに追加する方法を示す基本的な例です: https://developers.google.com/maps/documentation/javascript/examples/maptype-base。
Hybrid と Terrain の 2 つの基本的な mapType を考えて、それらの上に独自の mapType を構築してみましょう。
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
}));
これで、カスタム マップ タイプができました。そのうちの 1 つで maxZoom 値が増加している可能性があります。実際のデータがないため、この maxZoom レベルのマップは黒です。
zoom_change イベントをサブスクライブして、マップが黒のときにある MapType から別の 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 より大きい場合、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/。