谷歌地图API 3 - 缩放不尊重 [英] Google Maps API 3 - zoom not honored

问题描述

我尝试开发一个HTML页面，通过Google Maps API显示KML文件。

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

我的问题是，当我用缩放的更新值替换文件时，缩放选项未被遵守。我认为这是一般的网页缓存问题，但JavaScript应该添加一个后缀，通过创建一个唯一的urlSuffix来打破缓存。

  var kmlPath =http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml; 
 //为此url添加唯一编号 - 与图片一样 - 以避免在开发过程中缓存问题
 var urlSuffix =（new Date）.getTime（）。toString（）; 
 var layer = new google.maps.KmlLayer（kmlPath +'？'+ urlSuffix）; 
 layer.setMap（map）; 
  

如果这种技术能够让我在不拉动以前版本的情况下引用具有相同名称的文件从缓存？或者这是Google Maps API问题？或者我的编码错误？

代码段：

  var mylocation = {'latitude'：35.3，'longitude'：-120.3} ，mylocation.longitude）; var mapOptions = {zoom：12，center：myLatlng，mapTypeId：google.maps.MapTypeId.ROADMAP}; var map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions）; //这需要是完整的网址 - 不是相对网址var kmlPath =http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml; //为此url添加唯一编号 - 与图片一样 - 以避免在开发过程中发生缓存问题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;填充：0;宽度：260px; height：180px;}  

< script src =https ：

如果您不希望地图缩放以适​​合KmlLayer内容，请设置为>

您可以将preserveViewport选项设置为true。

工作代码片段：

var mylocation = { '纬度'：35.3，'经度'：-120.3}; var map;函数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）; //这需要是完整的网址 - 不是相对网址var kmlPath =http://www.slocleanair.org/air/AQI_III/AQI_2015_xx_xx.kml; //为此url添加唯一编号 - 与图片一样 - 以避免在开发过程中发生缓存问题var urlSuffix =（new Date）.getTime（）。toString（）; var layer = new google.maps.KmlLayer（{url：kmlPath +'？'+ urlSuffix，preserveViewport：true}）; layer.setMap（地图）; } 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>  

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

link to the page: http://www.slocleanair.org/air/AQI_III/mapTest.html

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);

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?

code snippet:

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>

解决方案

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

working code snippet:

  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>

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