将Google地图放在kml中心，而不是位置 [英] Center google map on kml, not location

问题描述

我在网页上有一个简单的脚本，正在加载一个小的kml文件，但是当我添加地理位置时，它始终将地图居中于当前位置. 我想加载以kml文件为中心的地图.仅当用户在kml区域中或将地图拖动到他所在的区域时，才应显示用户位置. 附件中，有没有一种方法可以轻松地使用javascript(地图api 3)刷新地图上的用户位置，而无需重新居中地图?

I have this simple script on a web page, loading a small kml file, but when I add geolocation, it always centers the map on the current location. And I want to load the map centered on the kml file. User location should only be displayed if he is in the area of the kml, or if he drags the map to the area where he is located. Accessorily, is there a way to easily refresh the user location on the map with javascript (maps api 3), without re-centering the map ?

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的位置:

So, here is my latest update, I added the disableAutoPan: true option to infoWindow, as indicated, and to refresh the user position I used watchPosition in place of getCurrentPosition, together with setPosition to move theinfoWindow position :

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

虽然我认为它很原始，但显然它能起作用...

Apparently it works although I suppose it's quite raw...

推荐答案

打开InfoWindow时，它正在平移地图以显示它.在 InfoWindowOptions disableAutoPan设置为true. >.

When you open the InfoWindow it is panning the map to display it. Set disableAutoPan to true in the InfoWindowOptions.

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>

这篇关于将Google地图放在kml中心，而不是位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！