Google Maps API 3 - 不支持缩放 [英] Google Maps API 3 - zoom not honored

问题描述

我正在尝试开发一个通过 Google Maps API 显示 KML 文件的 HTML 页面.

I am trying to develop an HTML page that displays a KML file via Google Maps API.

页面链接:http://www.slocleanair.org/air/AQI_III/mapTest.html

我的问题是，当我用更新的缩放值替换文件时，缩放选项没有得到遵守.我认为这通常是网络的缓存问题，但 JavaScript 应该添加一个后缀，通过创建唯一的 urlSuffix 来破坏缓存.

My problem is that the zoom option is not being honored when I replace the file with an updated value for the zoom. I think this is a caching problem with the web in general but the JavaScript should add a suffix that breaks the cache by creating a unique urlSuffix.

var kmlPath = "http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml";
// Add unique number to this url - as with images - to avoid caching issues during development
var urlSuffix = (new Date).getTime().toString();
var layer = new google.maps.KmlLayer(kmlPath + '?' + urlSuffix );
layer.setMap(map);

这种技术是否应该允许我引用同名文件而不从缓存中提取以前的版本?或者这是 Google Maps API 的问题?还是我的编码错误?

Should this technique be working to allow me to reference a file with the same name without pulling a previous version from cache? Or is this a Google Maps API problem? Or a coding error on my part?

代码片段:

var mylocation = {
  'latitude': 35.3,
  'longitude': -120.3
};
var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(mylocation.latitude, mylocation.longitude);
  var mapOptions = {
    zoom: 12,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  // This needs to be the Full URL - not a relative URL
  var kmlPath = "http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml";
  // Add unique number to this url - as with images - to avoid caching issues during development
  var urlSuffix = (new Date).getTime().toString();
  var layer = new google.maps.KmlLayer(kmlPath + '?' + urlSuffix);
  layer.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

#map_canvas {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  width: 260px;
  height: 180px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

推荐答案

如果您不想缩放地图以适合 KmlLayer 内容，请将 preserveViewport 选项设置为 true.

if you don't want the map zoomed to fit the KmlLayer content, set the preserveViewport option to true.

工作代码片段:

  var mylocation = {'latitude':  35.3,'longitude':  -120.3};
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng( mylocation.latitude, mylocation.longitude );
    var mapOptions = {zoom: 12,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    // This needs to be the Full URL - not a relative URL
    var kmlPath = "http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml";
    // Add unique number to this url - as with images - to avoid caching issues during development
    var urlSuffix = (new Date).getTime().toString();
    var layer = new google.maps.KmlLayer({url:kmlPath + '?' + urlSuffix, preserveViewport: true} );
    layer.setMap(map);
  }

  google.maps.event.addDomListener(window, 'load', initialize);

#map_canvas {margin-left: auto;margin-right: auto;padding: 0;width: 260px;height: 180px;}

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

这篇关于Google Maps API 3 - 不支持缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！