谷歌地图方向服务 onclick 绘制额外的标记

Posted

技术标签:

【中文标题】谷歌地图方向服务 onclick 绘制额外的标记【英文标题】：Google Maps direction service onclick draws extra markers 【发布时间】：2020-01-09 22:07:29 【问题描述】：

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

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

第一个标记有标签 A，第二个 B，但第三个正在打印..

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

这里是fiddle

代码 sn-p

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>

【问题讨论】：

第三个标记是指点击事件添加的实心红色标记吗？ 【参考方案1】：

隐藏“点击”标记（保留 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>

【讨论】：

#geocodezip，我将标记代码更改为：marker = new google.maps.Marker( position: event.latLng, draggable: true, label: text: label, color: '#a2003b ' ，图标：'../images/interface/marker3.png'，动画：google.maps.Animation.DROP，地图：地图）；并制作了自定义标记标签，但是在生成路线时单击第二张地图后，自定义标记标签将被忽略..如何避免这个伙伴？谢谢 这是一个新的/不同的问题。请用minimal reproducible example 来说明问题。 #geocodezip 我刚刚发布了一个新问题，请看一下：***.com/questions/57851462/…提前感谢您的帮助！

以上是关于谷歌地图方向服务 onclick 绘制额外的标记的主要内容，如果未能解决你的问题，请参考以下文章

如何使用谷歌方向 API 在苹果地图上快速绘制路线？

在我的 Android 应用程序上全面实施谷歌地图方向服务

Android：如何绘制从当前位置到目的地的路线方向谷歌地图 API V2

如何使用多色折线绘制谷歌地图航路点

将可拖动标记与折线谷歌地图绑定

旋转谷歌地图以显示我的实时方向