我网站上谷歌地图显示的默认缩放系数没有响应(在javascript中)

时间:2018-05-25 11:40:48

标签: javascript google-maps

Newbee in js here ...我正试图在我的网站上显示我的谷歌地图更加放大。在

中更改缩放编号
 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 个答案:

答案 0 :(得分:0)

您的KML图层会覆盖缩放值。

要保留缩放,您应使用preserveViewport: true

你应该这样使用

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

更新了fiddle

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>