Google Maps API：使用 setDirections 引用标记答案

【问题标题】：Google Maps API: Reference to markers using setDirectionsGoogle Maps API：使用 setDirections 引用标记
【发布时间】：2018-06-07 21:12:14
【问题描述】：

借助 Google Maps Javascript API，可以使用 DirectionsService 和 DirectionsRenderer (examples) 显示标记和它们之间的方向

const directionsService = new google.maps.DirectionsService()
const directionsDisplay = new google.maps.DirectionsRenderer()

const mapOptions = {
  zoom:7,
  center: loc // some coordinates
}
const map = new google.maps.Map(document.getElementById('map'), mapOptions)
directionsDisplay.setMap(map)

const request = {
  origin: start, // some coordinates
  destination: end, // some coordinates
  travelMode: 'DRIVING'
}

directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsDisplay.setDirections(result)
  }
})

上面将在地图上显示两个标记（开始、结束），它们之间的路线突出显示。我需要的是对创建的每个标记的引用（设置自定义标签、注册事件等）。在使用directionsDisplay.setDirections(result) 的同时有什么方法可以做到这一点，还是我需要手动创建所有内容？

【问题讨论】：

我不相信这是可能的，因为有一个long-standing feature request 可以将此功能添加到DirectionsRenderer。您必须从DirectionsResult 中返回的geocoded_waypoints 和routes 在地图上手动创建标记/折线
@Preston 你能给我发送参考示例吗？如何从 geocoded_waypoints 在地图上手动创建标记/折线？

标签： google-maps-api-3

【解决方案1】：

您无法（轻松/安全地）获取对标记的引用。您可以设置DirectionsRenderer 的suppressMarkers 选项，然后根据响应中的数据创建自己的“自定义”标记。

 directionsService.route(request, function(result, status) {
  if (status == 'OK') {
    directionsDisplay.setDirections(result);
    createMarker(result.routes[0].legs[0].start_location, "A", "start marker", map, infowindow);
    var lastLeg = result.routes[0].legs.length - 1;
    createMarker(result.routes[0].legs[lastLeg].end_location, "B", "end marker", map, infowindow);
  }
});

proof of concept fiddle

代码 sn-p：

function initialize() {
  const directionsService = new google.maps.DirectionsService();
  const directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });
  var infowindow = new google.maps.InfoWindow();
  const mapOptions = {
    zoom: 7,
    center: new google.maps.LatLng(37.4419, -122.1419) // some coordinates
  }
  const map = new google.maps.Map(document.getElementById('map'), mapOptions)
  directionsDisplay.setMap(map)

  const request = {
    origin: {
      lat: 37.4418834,
      lng: -122.1430195
    }, // some coordinates
    destination: {
      lat: 37.4529598,
      lng: -122.1817252
    }, // some coordinates
    travelMode: 'DRIVING'
  }

  directionsService.route(request, function(result, status) {
    if (status == 'OK') {
      directionsDisplay.setDirections(result);
      createMarker(result.routes[0].legs[0].start_location, "A", "start marker", map, infowindow);
      var lastLeg = result.routes[0].legs.length - 1;
      createMarker(result.routes[0].legs[lastLeg].end_location, "B", "end marker", map, infowindow);
    }
  })
}
google.maps.event.addDomListener(window, "load", initialize);
// Adds a marker to the map.
function createMarker(location, label, content, map, infowindow) {
  var marker = new google.maps.Marker({
    position: location,
    label: label,
    title: label,
    map: map
  });
  marker.addListener('click', function(e) {
    infowindow.setContent(content);
    infowindow.open(map, this);
  })
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

【讨论】：