javascript - 动态更新/刷新 KmlLayer

Question

这个问题已经有答案了:

Google Maps API 3 - zoom not honored (1 个回答)

已关闭 8 年前。

我正在尝试根据空间坐标数据在 Google map 上渲染邮政编码。由于坐标很多，我想仅动态加载可观察 map 上适用的坐标。

我正在尝试这样的事情:

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://example.com/my.kml'
  });

  ctaLayer.setMap(map);

  google.maps.event.addListener(map, 'bounds_changed', function() {

      var ne_lat = map.getBounds().getNorthEast().lat();
      var ne_lng = map.getBounds().getNorthEast().lng();

      if(typeof ctaLayer !== 'undefined') {
            ctaLayer.setMap(null);
      }

      var ctaLayer = new google.maps.KmlLayer({
        url: 'http://example.com/my.kml?ne_lat=' + ne_lat + '&ne_lng=' + ne_lng;
      });
      ctaLayer.setMap(map);

});

问题是，当我尝试移动或缩放 map 时，它只会将我踢回到之前的位置(缩小或重新居中 map )。

Answer 1

KmlLayer 默认情况下自动以数据为中心。如果您不希望它更改缩放/中心，请将preserveViewport选项设置为true。

(加上您的代码中有语法错误)

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://example.com/my.kml',
    preserveViewport: true
  });

  ctaLayer.setMap(map);

  google.maps.event.addListener(map, 'bounds_changed', function() {

      var ne_lat = map.getBounds().getNorthEast().lat();
      var ne_lng = map.getBounds().getNorthEast().lng();

      if(typeof ctaLayer !== 'undefined') {
            ctaLayer.setMap(null);
      }

      var ctaLayer = new google.maps.KmlLayer({
        url: 'http://example.com/my.kml?ne_lat=' + ne_lat + '&ne_lng=' + ne_lng,,
        preserveViewport: true
      });
      ctaLayer.setMap(map);

});