Google Maps API - 获取水体名称

Question

如何从谷歌地图api获取水体名称？ 例如，当我点击地图时，我选择＆＃34;这里有什么？＆＃34;弹出窗口将显示湖泊名称和坐标。我需要那个名字。

Answer 1

密歇根湖位于这些坐标的Places API。 ＆＃34;名称＆＃34;是＆＃34;密歇根湖/密歇根城＆＃34;但是。

使用Google Maps Javascript API v3商品库：

代码段

＆＃13;

＆＃13;

var map;
var infowindow;
var service;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(43.4501005, -87.2220187),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  infowindow = new google.maps.InfoWindow();
  service = new google.maps.places.PlacesService(map);
  service.nearbySearch({
    location: map.getCenter(),
    radius: 500
  }, callback);
}

function callback(results, status) {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    console.log("OK:" + results.length)
    for (var i = 0; i < results.length; i++) {
      console.log(results[i]);
      var marker = createMarker(results[i]);
      if (i == 0) google.maps.event.trigger(marker, 'click');
    }
  }
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name + "<br>place_id:" + place.place_id);
    infowindow.open(map, this);
    service.getDetails({
      placeId: place.place_id
    }, function(place, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>');
          infowindow.open(map, this);
        });
        google.maps.event.trigger(marker, 'click');
      }
    });
  });
  return marker;
}

google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;