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

Posted 2023-02-23

【中文标题】将谷歌地图中心放在kml上，而不是位置

【英文标题】：Center google map on kml, not location

【发布时间】：2017-04-27 22:39:04

【问题描述】：

我在网页上有这个简单的脚本，加载一个小的 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);

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

【参考方案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>

【讨论】：

谢谢，听起来很完美。为了刷新用户位置，我尝试使用 watchPosition 代替 getCurrentPosition，添加了第三个参数 timeout: 10000, enableHighAccuracy: true ，看起来不错，对吗？并足以更新用户的位置？还不能用我的智能手机测试...

那是另一个问题。

是的，我在第一篇文章中提到了一个附属问题......显然它有效，但仍然显示以前的信息窗口（android）。也许属性一个 zIndex...

相关问题How to remove information from info window (on a KmlLayer)

与How can I completely remove the Google Maps Pop-up Balloon?重复