1

デフォルトでは、私のマップには maxZoom=15 の TERRAIN mapType があります。ユーザーが 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

かなり単純な解決策は、地形とハイブリッドの組み込みタイプに基づいて独自の 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/。

于 2013-08-09T13:09:55.843 に答える