删除 google 地图标记上的边界图标

Question

目前我使用 google 地图 api v3 创建页面，并且有一个用户可以拖动的标记。在 dragend 之后，脚本在标记之间的道路上绘制蓝线。我的问题在目的地显示了 2 个标记（一个标记和 "B" 标记）

我已经尝试使用 fitbounds() 但仍然面临我的问题。

<div id="current"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>
<script type="text/javascript">
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(-7.760722, 110.408761),
    mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(-7.760722, 110.408761), 
    map: map,
    draggable:true
});
google.maps.event.addListener(
    marker,
    'dragend',
    function() {
        console.log(marker.position.lat());
        console.log(marker.position.lng());
        var msv = new google.maps.LatLng(-7.760722, 110.408761);
        var mgw = new google.maps.LatLng(marker.position.lat(), marker.position.lng());




        var request = {
            origin: msv,
            destination: mgw,
            travelMode: google.maps.TravelMode.DRIVING
        };
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) 
            {
                directionsDisplay.setDirections(response);
                directionsDisplay.setMap(map);
            }
            else
            {
                alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
            }
        });
    }
);

如何删除目标上的绑定标记（"B" 标记）？我希望目的地只有一个标记

Answer 1

您需要删除所有标记（使用 DirectionsRenderer 上的 {suppressMarkers:true} 选项（它们不能单独抑制）

var directionsDisplay = new google.maps.DirectionsRenderer({
  suppressMarkers: true
});

要显示 "A" 标记，请创建它：

var markerA = new google.maps.Marker({
  map: map,
  position: msv,
  label: {
    text: "A",
    color: "white"
  }
})

proof of concept fiddle

代码片段：

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer({
  suppressMarkers: true
});
var myOptions = {
  zoom: 14,
  center: new google.maps.LatLng(-7.760722, 110.408761),
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-7.760722, 110.408761),
  map: map,
  draggable: true
});
google.maps.event.addListener(
  marker,
  'dragend',
  function() {
    console.log(marker.position.lat());
    console.log(marker.position.lng());
    var msv = new google.maps.LatLng(-7.760722, 110.408761);
    var mgw = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
    // add "A" marker
    var markerA = new google.maps.Marker({
      map: map,
      position: msv,
      label: {
        text: "A",
        color: "white"
      }
    })

    var request = {
      origin: msv,
      destination: mgw,
      travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        directionsDisplay.setMap(map);
      } else {
        alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status);
      }
    });
  }
);

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

<div id="current"></div>

<div id="map_canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

删除 google 地图标记上的边界图标

Remove Bounds icon on google maps marker

google-maps-api-3

google-maps-markers