谷歌地图使用地点 ID 添加标记答案

【问题标题】：Google Map add marker using place ID谷歌地图使用地点 ID 添加标记
【发布时间】：2020-09-16 21:05:33
【问题描述】：

我正在尝试使用其 PlaceID 在 Google 地图中放置一个标记。我的地图正在工作和显示，还可以在其中添加标记（使用纬度和经度）。

下面的代码是我用来尝试显示标记的代码使用它的 placeID 但它没有显示。

function addPlaces(){
    var marker = new google.maps.Marker({
        place: new google.maps.Place('ChIJN1t_tDeuEmsRUsoyG83frY4'),
        map: map
    });
}

地图加载后调用此函数。

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers google-map-place

【解决方案1】：

如果你想在地图上放置一个place_id为'ChIJN1t_tDeuEmsRUsoyG83frY4'的地方标记，你需要向getDetails发出getDetails请求

var service = new google.maps.places.PlacesService(map);
service.getDetails({
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
}, function (result, status) {
    var marker = new google.maps.Marker({
        map: map,
        place: {
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: result.geometry.location
        }
    });
});

proof of concept fiddle

代码sn-p：

var map;
var infoWindow;
var service;

function initialize() {
  var mapOptions = {
    zoom: 19,
    center: new google.maps.LatLng(51.257195, 3.716563)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  infoWindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.getDetails({
    placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
  }, function(result, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }
    var marker = new google.maps.Marker({
      map: map,
      position: result.geometry.location
    });
    var address = result.adr_address;
    var newAddr = address.split("</span>,");

    infoWindow.setContent(result.name + "<br>" + newAddr[0] + "<br>" + newAddr[1] + "<br>" + newAddr[2]);
    infoWindow.open(map, marker);
  });

}

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?v=3&libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas"></div>

【讨论】：