Question

当前，我使用google maps api v3创建了页面，并且有一个可供用户拖动的标记。拖动后，脚本将在标记之间的道路上绘制蓝线。我的问题是在目的地显示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

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

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地图标记上删除边界图标

1 个答案: