-1

スタイル付きの Google マップを使用すると、設定した maxZoom と minZoom が無視され、ズーム バーが完全に削除されます。StyledMapType を含めない場合、ズーム制限は機能します。何か不足していますか？または、maxZoom/minZoom は StyledMapType でサポートされていませんか?

助けてくれてありがとう。

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new 
  google.maps.LatLng(29.45, -95.75),
    zoom: 10
  });



   var style = [
    {
      featureType: 'all',
      elementType: 'all',
      stylers: [
        { saturation: -99 }
      ]
    },
           {
      featureType: 'road.local',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'administrative.land_parcel',
      elementType: 'all',
      stylers: [
        { visibility: 'off' }
      ]
    }
  ];




   var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });


   map.mapTypes.set('map-style', styledMapType);





  google.maps.event.addListenerOnce(map, "projection_changed", function(){
  map.setMapTypeId('map-style');        
    layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: "col3",
      from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });

  setZoomLimit(map, google.maps.StyledMapType);
  setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
  setZoomLimit(map, google.maps.MapTypeId.HYBRID);
  setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
  setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
  map.setMapTypeId(google.maps.StyledMapType);  
}); 

  layer_0 = new google.maps.StyledMapType({
    query: {
      select: "col3",
      from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
}

  function setZoomLimit(map, mapTypeId){
  var mapTypeRegistry = map.mapTypes;

var mapType = mapTypeRegistry.get(mapTypeId);
mapType.maxZoom = 13;  
mapType.minZoom = 8; }
4

1 に答える 1

0

  1. あなたのコードは JavaScript エラーを生成Uncaught TypeError: Cannot set property 'maxZoom' of undefinedします: この行: mapType.maxZoom = 13;. ありませんgoogle.maps.StyledMapType。スタイル付きマップの mapTypeId は「map-style」です。「未定義」の maxZoom プロパティを設定することはできません。

  2. これは正しくありません。何をすべきかわかりません。必要ではないと思います。

layer_0 = new google.maps.StyledMapType({
  query: {
    select: "col3",
    from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
  },
  map: map,
  styleId: 2,
  templateId: 2
});

ワーキングフィドル

コードスニペット：

var map;

function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: new
    google.maps.LatLng(29.45, -95.75),
    zoom: 10
  });

  var style = [{
    featureType: 'all',
    elementType: 'all',
    stylers: [{
      saturation: -99
    }]
  }, {
    featureType: 'road.local',
    elementType: 'all',
    stylers: [{
      visibility: 'off'
    }]
  }, {
    featureType: 'administrative.land_parcel',
    elementType: 'all',
    stylers: [{
      visibility: 'off'
    }]
  }];

  var styledMapType = new google.maps.StyledMapType(style, {
    map: map,
    name: 'Styled Map'
  });
  map.mapTypes.set('map-style', styledMapType);


  google.maps.event.addListenerOnce(map, "projection_changed", function() {
    setZoomLimit(map, 'map-style');
    setZoomLimit(map, google.maps.MapTypeId.ROADMAP);
    setZoomLimit(map, google.maps.MapTypeId.HYBRID);
    setZoomLimit(map, google.maps.MapTypeId.SATELLITE);
    setZoomLimit(map, google.maps.MapTypeId.TERRAIN);
    map.setMapTypeId('map-style');
  });

  layer_0 = new google.maps.FusionTablesLayer({
    query: {
      select: "col3",
      from: "14XfhpSuNK0aSJkbnb5UFrsE1UPRE_wr4d9IwKjW7"
    },
    map: map,
    styleId: 2,
    templateId: 2
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

function setZoomLimit(map, mapTypeId) {
  var mapTypeRegistry = map.mapTypes;

  var mapType = mapTypeRegistry.get(mapTypeId);
  mapType.maxZoom = 13;
  mapType.minZoom = 8;
}
html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

于 2015-08-21T04:55:54.617 に答える