中心Google地图在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);

所以，这是我的最新更新，我添加了DisableAutopan：True选项，如所示，为Infowdows添加了我使用的用户位置，我使用了 watchposition > getCurrentPosition >，与 setPosition 一起移动ininfowwindow位置：

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时，它正在盖上地图以显示它。将disableAutoPan设置为InfoWindowOptions中的true。

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

概念证明小提琴

代码段：

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>