将谷歌地图中心放在kml上，而不是位置

Question

我在网页上有这个简单的脚本，加载一个小的 kml 文件，但是当我添加地理定位时，它总是以当前位置为中心的地图。 我想加载以 kml 文件为中心的地图。仅当用户在 kml 区域内或将地图拖到其所在区域时，才应显示用户位置。 另外，有没有办法使用javascript（maps api 3）轻松刷新地图上的用户位置，而无需重新居中地图？

var map;
function initialize() {
var centre = new google.maps.LatLng(4,4);
var mapOptions = {
zoom: 11,
center: centre
}

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://www.server.com/kmlfile.kml',
preserveViewport: false
});
ctaLayer.setMap(map);

if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
  var pos = new google.maps.LatLng(position.coords.latitude,
                                   position.coords.longitude);

  var infowindow = new google.maps.InfoWindow({
    map: map,
    position: pos,
    content: 'Location found using HTML5.'
   });

//  map.setCenter(pos);
   }, function() {
  handleNoGeolocation(true);
   });
  }
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);

所以，这是我的最新更新，我向 infoWindow 添加了 disableAutoPan: true 选项，如图所示，为了刷新用户位置，我使用 watchPosition 代替 getCurrentPosition，与 setPosition 一起移动 infoWindow 的位置：

var map;
function initialize() {
  var center_map = new google.maps.LatLng(45,-4);
  var mapOptions = {
    zoom: 11,
    center: centre
  }

map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
  url: 'http://www.server.com/kmlfile.kml', preserveViewport: false
}); 
var ctaLayer.setMap(map);
if(navigator.geolocation) {
  navigator.geolocation.watchPosition(function(position) {
    var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    if(typeof infowindow == "undefined") {
      infowindow = new google.maps.InfoWindow({
        disableAutoPan: true,
        map: map, position: pos,
        content: 'Your position',
        zIndex: 0 /* not needed */
      });
    }
    else {
      infowindow.setPosition(pos);
    }
  }, function() {
/*handleNoGeolocation(true);*/
/* had to delete this because errors centered the map on North Pole */
  },
  { timeout: 10000, enableHighAccuracy: true  }); /* high accuracy for tests */
  }
}; 

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

显然它有效，虽然我认为它很原始......

Answer 1

当您打开InfoWindow 时，它正在平移地图以显示它。在InfoWindowOptions 中将disableAutoPan 设置为true。

var infowindow = new google.maps.InfoWindow({
  map: map,
  position: pos,
  content: 'Location found using HTML5.',
  disableAutoPan: true
 });

proof of concept fiddle

代码 sn-p：

var map;

function initialize() {
  var centre = new google.maps.LatLng(4, 4);
  var mapOptions = {
    zoom: 11,
    center: centre
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://www.geocodezip.com/geoxml3_test/cta.xml',
    preserveViewport: false
  });
  ctaLayer.setMap(map);

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
        position.coords.longitude);

      var infowindow = new google.maps.InfoWindow({
        disableAutoPan: true,
        map: map,
        position: pos,
        content: 'Location found using HTML5.'

      });

      //  map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  }
}

function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content,
    disableAutoPan: true
  };

  var infowindow = new google.maps.InfoWindow(options);
  // map.setCenter(options.position);
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

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