Google Maps Javascript 地图中心更新

Question

全部，

我绝不是一个 JavaScript 程序员，主要是重用/重新利用这里和那里的代码片段来完成任务。 我目前正在尝试解决 Google 地图的限制，即除非您自己制作地图，否则地图不可样式化 (AFAICT)。 我有一个可用的 HTML 页面，其中包含一个 Google 地图，它正确地使用 Google 地图样式和地理位置将地图中心设置为用户的位置。

我的问题：

如果在页面打开时用户的位置发生变化，我如何使地图以用户的位置为中心？

尽可能搜索我一直无法找到通过 JavaScript 更新地理位置的示例。 这可能是不可能的，也可能是 Google 的 API 文档薄弱，或者我的 Google-fu 很糟糕。 可能三个都有。

我的代码（几乎逐字取自 Google Maps 文档）：

 <body> <div id="map"></div> <script> var map, infoWindow; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: 38.391677, lng: -97.661646}, zoom: 17, styles: [...] }); infoWindow = new google.maps.InfoWindow; // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = { lat: position.coords.latitude, lng: position.coords.longitude }; infoWindow.setPosition(pos); infoWindow.setContent('Location found.'); infoWindow.open(map); map.setCenter(pos); }, function() { handleLocationError(true, infoWindow, map.getCenter()); }); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent(browserHasGeolocation ? 'Error: The Geolocation service failed.' : 'Error: Your browser doesn\\'t support geolocation.'); infoWindow.open(map); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=********************************&callback=initMap"> </script> </body>

Answer 1

要检测地理位置的变化，您可以使用watchPosition方法。 （虽然并非所有浏览器都支持）。

当您有一组新坐标时，您可以调用setCenter ，它会为您将地图居中。

这里有一篇博客文章似乎准确地描述了您正在尝试做的事情。

Answer 2

假设中心到当前位置的初始设置有效，您可以简单地将代码包装在 setInterval 调用中，以每隔几秒钟重复设置中心：

if (navigator.geolocation) {
  setInterval(function() {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      infoWindow.setPosition(pos);
      infoWindow.setContent('Location found.'); 
      infoWindow.open(map);
      map.setCenter(pos);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  }, 1000); // 1000 = number of milliseconds after which to repeat the call, i.e. 1 second
} else {
  // Browser doesn't support Geolocation
  handleLocationError(false, infoWindow, map.getCenter());
}

我不确定，如果您真的希望在每次调用时都显示 infoWindow 和错误消息，但基础知识就在那里。

Google Maps Javascript 地图中心更新

问题描述

2 个解决方案

解决方案1
1 2019-03-09 19:34:33

解决方案2
0 2019-03-09 19:36:27

Google Maps Javascript 地图中心更新

问题描述

2 个解决方案

解决方案1 1 2019-03-09 19:34:33

解决方案2 0 2019-03-09 19:36:27

解决方案1
1 2019-03-09 19:34:33

解决方案2
0 2019-03-09 19:36:27