更改 Google Maps 路线中端点标记的标题

Posted

技术标签:

【中文标题】更改 Google Maps 路线中端点标记的标题【英文标题】：Changing titles of endpoint markers in a Google Maps route 【发布时间】：2014-10-20 09:19:38 【问题描述】：

我有一个简单的测试网页，显示行车路线：

效果很好，但我的问题是所示路线的开始和结束标记具有无意义的标题“A”和“B”。

我想使用ReverseGeocoding 来获取 2 个路由端点的标题。

所以我准备了以下代码，地址被正确提取并使用console.log打印出来：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas 
        height: 100%;
        margin: 0px;
        padding: 0px
      
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() 
  directionsDisplay = new google.maps.DirectionsRenderer();
  map = new google.maps.Map(document.getElementById('map-canvas'), null);
  directionsDisplay.setMap(map);
  calcRoute();


function calcRoute() 
  var start = new google.maps.LatLng(51.470907, 7.225558);
  var end = new google.maps.LatLng(52.435293, 10.736883);

  var startGeocoder = new google.maps.Geocoder();
  var endGeocoder = new google.maps.Geocoder();

  startGeocoder.geocode('latLng': start, function(results, status) 
    if (status == google.maps.GeocoderStatus.OK && results[1]) 
      console.log('START: ' + results[1].formatted_address);
      //infowindow.setContent(results[1].formatted_address);
      //infowindow.open(map, marker);
    
  );

  endGeocoder.geocode('latLng': end, function(results, status) 
    if (status == google.maps.GeocoderStatus.OK && results[1]) 
      console.log('END: ' + results[1].formatted_address);
      //infowindow.setContent(results[1].formatted_address);
      //infowindow.open(map, marker);
    
  );

  var request = 
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
  ;

  directionsService.route(request, function(response, status) 
    if (status == google.maps.DirectionsStatus.OK) 
      directionsDisplay.setDirections(response);
    
  );


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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

但是我的问题是我不知道如何访问路线的 2 个端点标记并将它们的标题从“A”和“B”更改为我获取的地址字符串.

DirectionsRenderer 的 Google Maps javascript API v3 参考没有列出任何明显的钩子（或者我应该在这里以某种方式使用 infoWindow 属性？但是为什么它不是一个数组，因为我有 2 个端点？ )...

更新：

这是根据 Emmanuel 的建议更新的代码（谢谢！）

它可以工作，但我对此并不满意，因为只有当用户将鼠标悬停在标记上时才会显示端点标题 - 而我的目标环境中没有鼠标。我想知道是否有更好的选择让端点地址在地图上永久可见？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas 
        height: 100%;
        margin: 0px;
        padding: 0px
      
    </style>
    <script src="http://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var directionsDisplay;
var map;

function initialize() 
  directionsDisplay = new google.maps.DirectionsRenderer(suppressMarkers: true);
  map = new google.maps.Map(document.getElementById('map-canvas'), null);
  directionsDisplay.setMap(map);
  calcRoute();


function calcRoute() 
  var start = new google.maps.LatLng(51.470907, 7.225558);
  var end = new google.maps.LatLng(52.435293, 10.736883);

  var request = 
    origin: start,
    destination: end,
    travelMode: google.maps.TravelMode.DRIVING
  ;

  var directionsService = new google.maps.DirectionsService();
  directionsService.route(request, function(response, status) 
    if (status != google.maps.DirectionsStatus.OK) 
      return;

    directionsDisplay.setDirections(response);

    // add start and end markers
    var start = response.mc.origin;
    var startMarker = new google.maps.Marker(
      position: start,
      map: map
    );

    var startGeocoder = new google.maps.Geocoder();
    startGeocoder.geocode('latLng': start, function(results, status) 
      if (status == google.maps.GeocoderStatus.OK && results[1]) 
        startMarker.setOptions(title: 'START: ' + results[1].formatted_address);
      
    );

    var end = response.mc.destination;
    var endMarker = new google.maps.Marker(
      position: end,
      map: map
    );

    var endGeocoder = new google.maps.Geocoder();
    endGeocoder.geocode('latLng': end, function(results, status) 
      if (status == google.maps.GeocoderStatus.OK && results[1]) 
        endMarker.setOptions(title: 'END: ' + results[1].formatted_address);
      
    );
  );


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

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

【问题讨论】：

【参考方案1】：

我不知道如何访问这些标记。但我有一个选择；您可以抑制这些标记并设置自己的标记。然后你可以随心所欲地制作它们。

<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var startMarker;
var endMarker;

function initialize() 
  directionsDisplay = new google.maps.DirectionsRenderer(suppressMarkers: true);
  map = new google.maps.Map(document.getElementById('map-canvas'), null);
  directionsDisplay.setMap(map);
  calcRoute();


function calcRoute() 
  var start = new google.maps.LatLng(51.470907, 7.225558);
  var end = new google.maps.LatLng(52.435293, 10.736883);

  var startGeocoder = new google.maps.Geocoder();
  var endGeocoder = new google.maps.Geocoder();

  startGeocoder.geocode('latLng': start, function(results, status) 
    if (status == google.maps.GeocoderStatus.OK && results[1]) 
      startMarker.setOptions(title: 'START: ' + results[1].formatted_address);
    
  );

  endGeocoder.geocode('latLng': end, function(results, status) 
    if (status == google.maps.GeocoderStatus.OK && results[1]) 
      endMarker.setOptions(title: 'END: ' + results[1].formatted_address);
    
  );

  var request = 
      origin: start,
      destination: end,
      travelMode: google.maps.TravelMode.DRIVING
  ;

  directionsService.route(request, function(response, status) 
    if (status == google.maps.DirectionsStatus.OK) 
      directionsDisplay.setDirections(response);
      // add start and end markers
      startMarker = new google.maps.Marker(
        position: response.mc.origin,
        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
        map: map
      );
      endMarker = new google.maps.Marker(
        position: response.mc.destination,
        map: map
      );
    
  );


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

</script>

【讨论】：

+1 谢谢，这行得通。我已将两个 .geocode 调用移动到 .route 回调中，就在创建标记之后 - 以防止时间问题......但是我对结果不满意 - 因为端点标题仅在我悬停时可见将鼠标悬停在它们上方（而且我的目标环境中没有鼠标）。我想知道是否有更好的选择使端点标题在地图中可见。是否可以在 Google 地图中同时显示 2 个 InfoWindows？ 当然可以。只需创建 2 个 infoWindow 对象并强制它们打开。另一种方法是使用 Marker With Label 库：code.google.com/p/google-maps-utility-library-v3/wiki/Libraries

以上是关于更改 Google Maps 路线中端点标记的标题的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Google Maps API 中的两个标记之间绘制路线？

google-maps kml，如何标记线串？

在 Google Maps API v2 中更改标记大小

React js react-google-maps-api 更改颜色标记默认

Google Maps Api v3：如何更改方向（设置）面板中的默认航点标记？

如何更改地图（而不是标记）的 Google Maps 可拖动属性？