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

代码段

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>

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

1 个答案: