Question

我需要在google map中显示驾驶员的实时位置。我有目的地经度和纬度，也有驱动程序的实时经度和纬度值。

我想在地图上显示，其中一个是固定标记，另一个是像蓝色圆圈一样向目标移动的标记。

下面是我的部分运行的代码

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Travel Modes in Directions</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #floating-panel {
        position: absolute;
        top: 10px;
        left: 25%;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
        text-align: center;
        font-family: 'Roboto','sans-serif';
        line-height: 30px;
        padding-left: 10px;
      }
    </style>
  </head>
  <body>
    <div id="floating-panel">
    </div>
    <div id="map"></div>
    <script>
    var lng = -122.501;
    var directionsDisplay;
    var directionsService;
    var interval;
      function initMap() {
        directionsDisplay = new google.maps.DirectionsRenderer;
        directionsService = new google.maps.DirectionsService;
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: {lat: 37.77, lng: -122.447}
        });
        directionsDisplay.setMap(map);
        interval = setInterval(calculateAndDisplayRoute, 1000);

      }

      function calculateAndDisplayRoute() {
      console.log(lng);
      lng = lng - .001;
        directionsService.route({
          origin: {lat: 37.768, lng:lng},  // Haight.
          destination: {lat: 37.768, lng: -122.511},  // Ocean Beach.
          // Note that Javascript allows us to access the constant
          // using square brackets and a string value as its
          // "property."
          travelMode: google.maps.TravelMode['DRIVING']
        }, function(response, status) {
          if (status == 'OK') {
            directionsDisplay.setDirections(response);
            if((lng + 122.511) < 0.001) {
                clearInterval(interval);
            }
          } else {
            window.alert('Directions request failed due to ' + status);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

如何使用移动标记在两个位置之间添加路线

0 个答案: