Google 地图方向服务 onclick 绘制额外标记

Question

我必须在地图点击事件的 2 个点/标记之间创建 google 地图方向服务

我已经准备好 fiddle 来说明当您第二次单击地图时，第三个标记是如何打印在地图上的。无论如何我都无法成功删除第三个标记。

第一个标记有标签 A，第二个标记为 B，但第三个标记刚刚被打印..

感谢您抽出宝贵时间帮助解决此问题。

这里是 fiddle

代码片段

var map;

function calculateAndDisplayRoute(directionsService, directionsRenderer) {

  directionsService.route({
      origin: {
        query: document.getElementById('departure_address').value
      },
      destination: {
        query: document.getElementById('arrival_address').value
      },
      travelMode: 'DRIVING'
    },
    function(response, status) {
      if (status === 'OK') {
        var point = response.routes[0].legs[0];
        console.log(point);

        directionsRenderer.setDirections(response);




      } else {
        alert('Directions request failed due to ' + status);
      }
    });
}

function initMap_mobile() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var map = new google.maps.Map(document.getElementById('mobilemap'), {
    mapTypeControl: false,
    center: {
      lat: 42.700000762939,
      lng: 23.333299636841
    },
    zoom: 13

  });

  directionsRenderer.setMap(map);



  var marker;
  var infowindow;


  google.maps.event.addListener(map, 'click', function(event) {
    //alert(marker.length);
    var dep_lat = $('#dep_lat').val();
    var dep_lng = $('#dep_lng').val();
    var arr_lat = $('#arr_lat').val();
    var arr_lng = $('#arr_lng').val();
    //alert(event.latLng.lat() +"-"+ event.latLng.lng());
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'latLng': new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
    }, function(results, status) {
      //alert(results[0].formatted_address); //Final address from lat and lng
      //otherwise clicks twice

      set_lat_long(event.latLng.lat(), event.latLng.lng(), results[0].formatted_address, directionsService, directionsRenderer);

      //placeMarker(event.latLng, map, results[0].formatted_address) 
      //alert();
      if (marker == null) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
        //marker = placeMarker(event.latLng, map, results[0].formatted_address) ;

      } else {
        marker.setPosition(event.latLng);
        //infowindow.open(map, marker);
      }


    });
  });




  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };
  document.getElementById('departure_address').addEventListener('change', onChangeHandler);
  document.getElementById('arrival_address').addEventListener('change', onChangeHandler);





}

function set_lat_long(lat, lng, address, directionsService, directionsRenderer) {
  var dep_lat = $('#dep_lat').val();
  var dep_lng = $('#dep_lng').val();
  var arr_lat = $('#arr_lat').val();
  var arr_lng = $('#arr_lng').val();

  if (isEmpty(dep_lat) || isEmpty(dep_lng)) {
    //alert(dep_lat);
    $('#dep_lat').val(lat);
    $('#dep_lng').val(lng);
    $('#departure_address').val(address);
    $('#clear_dep').show();
  } else {
    //alert(dep_lat);
    if (isEmpty(arr_lat) || isEmpty(arr_lng)) {
      $('#arr_lat').val(lat);
      $('#arr_lng').val(lng);
      $('#arrival_address').val(address);
      $('#clear_arr,.arrival_address').show();
    }
  }

  if (!isEmpty($('#dep_lat').val()) && !isEmpty($('#dep_lng').val()) && !isEmpty($('#arr_lat').val()) && !isEmpty($('#arr_lng').val())) calculateAndDisplayRoute(directionsService, directionsRenderer);
}

function isEmpty(value) {
  return (value == null || value.length === 0);
}
initMap_mobile();

#mobilemap {
  height: 500px;
  width: 100%;
  border: solid 1px #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="cell-xs-12 mobw100 npr">
  <div class="form-group text-right">
    <label for="departure_address" class="form-label">From</label>
    <input maxlength="100" id="departure_address" placeholder="From address" type="text" name="departure_address" class="controls form-control form-control-gray-base dybck" value="" style="background: rgb(255, 236, 236) none repeat scroll 0% 0%;" autocomplete="off">

    <input type="hidden" name="dep_lat" id="dep_lat" value="">
    <input type="hidden" name="dep_lng" id="dep_lng" value="">
  </div>
</div>

<div class="cell-xs-12 offset-top-20 mobw100 npr he arrival_address">
  <div class="form-group text-right">
    <label for="arrival_address" class="form-label">To</label>
    <input maxlength="100" id="arrival_address" placeholder="To address" type="text" name="arrival_address" class="controls form-control form-control-gray-base" value="" autocomplete="off">

    <input type="hidden" name="arr_lat" id="arr_lat" value="">
    <input type="hidden" name="arr_lng" id="arr_lng" value="">
  </div>
</div>
<div id="mobilemap"></div>

Answer 1

隐藏 "click" 标记（保留 DirectionsRenderer 显示的标记）：

将标记移动到全局范围（map 变量所在的位置）：

var map;
var marker;

显示路线时在DirectionsService回调函数中隐藏标记：

function(response, status) {
  if (status === 'OK') {
    var point = response.routes[0].legs[0];
    console.log(point);
    directionsRenderer.setDirections(response);
    if (marker && marker.setMap) // hide click marker when directions displayed
      marker.setMap(null);
  } else {
    alert('Directions request failed due to ' + status);
  }
}

proof of concept fiddle

var map;
var marker; // move marker definition into the global scope

function calculateAndDisplayRoute(directionsService, directionsRenderer) {
  directionsService.route({
      origin: {
        query: document.getElementById('departure_address').value
      },
      destination: {
        query: document.getElementById('arrival_address').value
      },
      travelMode: 'DRIVING'
    },
    function(response, status) {
      if (status === 'OK') {
        var point = response.routes[0].legs[0];
        console.log(point);
        directionsRenderer.setDirections(response);
        if (marker && marker.setMap) // hide click marker when directions displayed
          marker.setMap(null);
      } else {
        alert('Directions request failed due to ' + status);
      }
    });
}

function initMap_mobile() {
  var directionsService = new google.maps.DirectionsService();
  var directionsRenderer = new google.maps.DirectionsRenderer();
  var map = new google.maps.Map(document.getElementById('mobilemap'), {
    mapTypeControl: false,
    center: {
      lat: 42.700000762939,
      lng: 23.333299636841
    },
    zoom: 13
  });
  directionsRenderer.setMap(map);
  var infowindow;

  google.maps.event.addListener(map, 'click', function(event) {
    //alert(marker.length);
    var dep_lat = $('#dep_lat').val();
    var dep_lng = $('#dep_lng').val();
    var arr_lat = $('#arr_lat').val();
    var arr_lng = $('#arr_lng').val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
      'latLng': new google.maps.LatLng(event.latLng.lat(), event.latLng.lng())
    }, function(results, status) {
      //otherwise clicks twice
      set_lat_long(event.latLng.lat(), event.latLng.lng(), results[0].formatted_address, directionsService, directionsRenderer);
      if (marker == null) {
        marker = new google.maps.Marker({
          position: event.latLng,
          map: map
        });
      } else {
        marker.setPosition(event.latLng);
      }
    });
  });
  var onChangeHandler = function() {
    calculateAndDisplayRoute(directionsService, directionsRenderer);
  };
  document.getElementById('departure_address').addEventListener('change', onChangeHandler);
  document.getElementById('arrival_address').addEventListener('change', onChangeHandler);
}

function set_lat_long(lat, lng, address, directionsService, directionsRenderer) {
  var dep_lat = $('#dep_lat').val();
  var dep_lng = $('#dep_lng').val();
  var arr_lat = $('#arr_lat').val();
  var arr_lng = $('#arr_lng').val();

  if (isEmpty(dep_lat) || isEmpty(dep_lng)) {
    //alert(dep_lat);
    $('#dep_lat').val(lat);
    $('#dep_lng').val(lng);
    $('#departure_address').val(address);
    $('#clear_dep').show();
  } else {
    if (isEmpty(arr_lat) || isEmpty(arr_lng)) {
      $('#arr_lat').val(lat);
      $('#arr_lng').val(lng);
      $('#arrival_address').val(address);
      $('#clear_arr,.arrival_address').show();
    }
  }

  if (!isEmpty($('#dep_lat').val()) && !isEmpty($('#dep_lng').val()) && !isEmpty($('#arr_lat').val()) && !isEmpty($('#arr_lng').val())) calculateAndDisplayRoute(directionsService, directionsRenderer);
}

function isEmpty(value) {
  return (value == null || value.length === 0);
}
initMap_mobile();

#mobilemap {
  height: 500px;
  width: 100%;
  border: solid 1px #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="cell-xs-12 mobw100 npr">
  <div class="form-group text-right">
    <label for="departure_address" class="form-label">From</label>
    <input maxlength="100" id="departure_address" placeholder="From address" type="text" name="departure_address" class="controls form-control form-control-gray-base dybck" value="" style="background: rgb(255, 236, 236) none repeat scroll 0% 0%;" autocomplete="off">

    <input type="hidden" name="dep_lat" id="dep_lat" value="">
    <input type="hidden" name="dep_lng" id="dep_lng" value="">
  </div>
</div>

<div class="cell-xs-12 offset-top-20 mobw100 npr he arrival_address">
  <div class="form-group text-right">
    <label for="arrival_address" class="form-label">To</label>
    <input maxlength="100" id="arrival_address" placeholder="To address" type="text" name="arrival_address" class="controls form-control form-control-gray-base" value="" autocomplete="off">

    <input type="hidden" name="arr_lat" id="arr_lat" value="">
    <input type="hidden" name="arr_lng" id="arr_lng" value="">
  </div>
</div>
<div id="mobilemap"></div>

Google 地图方向服务 onclick 绘制额外标记

Google Maps direction service onclick draws extra markers

javascript

jquery

google-maps

google-maps-api-3

google-maps-markers