Question

我想：

在网页上呈现Google地图;
让地图中心位于用户的当前位置;
显示该用户的本地名称。

问题：假设这是可能的（并且限制因素是我的当前能力），这将如何实现？

资源：

我正在使用Google Maps JS API v3和Places Library

目前，我可以实现在硬编码位置周围渲染地点或将地图居中放在用户身上。

我使用this Geolocation code和Places Search code假设我可以将一个代码集成到另一个代码中（通过将地理定位器中的lat / long值传递到位置对象pyrmont）

对于Google Maps API v2，存在一个SO问题，v3弃用。

Answer 1

您需要做的第一件事是定义地图：

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY&libraries=places&callback=initMap" async defer></script>

这告诉我们我们正在使用场所库，在回调时我们将调用initMap函数。

function initMap() {
  var london = {
    lat: 51.5073509,
    lng: -0.12775829999998223
  };
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      london = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(london);
      setPlaces(london);
    });
  } else {
    // Browser doesn't support Geolocation   
    //since you set coords above this section it will default to that
    setPlaces(london);      
  }
  map = new google.maps.Map(document.getElementById('map'), {
    center: london,
    zoom: 15
  });      
}

initMap函数初始化地图。如果用户未启用位置，我们会将var london设置为伦敦的坐标。

然后我们检查他们的位置是否已开启if (navigator.geolocation) {这样做。如果这是真的，那么我们将london覆盖到用户位置。如果已更改，我们会将地图移动到用户位置。

两个结果都会调用：

function setPlaces(location) {
  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: location,
    radius: 1000,
    type: ['store']
  }, callback);
}

获取位置周围的位置（用户或预定义的）

这里可以看到一个工作示例，参数等只需阅读API。

JSFIDDLE：https://jsfiddle.net/4kgy68rg/1/

如何将地理位置合并到Google Places API中？

1 个答案: