bugfix> javascript > 投稿

ここのjsのNewbee ...私のGoogleマップを私のウェブサイトにもっとズームインして表示しようとしています。ズーム番号を変更する

zoom: 15,

効果がありません。どうしたの?助けてください。問題を参照してくださいjsfiddle。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
	zoom: 15,
	center: {lat: 52.132633, lng: 5.291266}
  });
  var georssLayer = new google.maps.KmlLayer({
    url: 'https://www.tso-assistent.nl/js/TSO-ASSISTENT.kmz',
  });  
  georssLayer.setMap(map);
}
// https://developers.google.com/maps/documentation/javascript/examples/icon-simple
// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqjPjdmeqpVPBJqQ2QxOvk6g8uHRTou9k&callback=initMap"></script>

回答 1 件
  • KMLレイヤーがズーム値をオーバーライドしています。

    ズームを維持するには、 preserveViewport: true を使用する必要があります

    あなたはこのように使うべきです

    var georssLayer = new google.maps.KmlLayer({
        url: 'https://www.tso-assistent.nl/js/TSO-ASSISTENT.kmz',
        preserveViewport: true
      });
    
    

    更新されたフィドル

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
    	zoom: 7,
    	center: {lat: 52.132633, lng: 5.291266}
      });
      var georssLayer = new google.maps.KmlLayer({
        url: 'https://www.tso-assistent.nl/js/TSO-ASSISTENT.kmz',
        preserveViewport: true
      });  
      georssLayer.setMap(map);
    }
    // https://developers.google.com/maps/documentation/javascript/examples/icon-simple
    // Loop through the results array and place a marker for each
    // set of coordinates.
    window.eqfeed_callback = function(results) {
      for (var i = 0; i < results.features.length; i++) {
        var coords = results.features[i].geometry.coordinates;
        var latLng = new google.maps.LatLng(coords[1],coords[0]);
        var marker = new google.maps.Marker({
          position: latLng,
          map: map
        });
      }
    }
    
    
    /* Always set the map height explicitly to define the size of the div
     * element that contains the map. */
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    
    <div id="map"></div>
    <!-- Replace the value of the key parameter with your own API key. -->
            <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBqjPjdmeqpVPBJqQ2QxOvk6g8uHRTou9k&callback=initMap"></script>
    
    

あなたの答え