使用Google Maps Directions API

时间:2019-07-08 12:14:44

标签: javascript google-maps google-maps-api-3

我正在使用Google Maps Directions服务向用户显示两点之间的路线,该点已通过输入框输入,并使用DirectionsRenderer显示了方向。方向显示非常好,但是我想显示自定义折线(如附图所示),笔触颜色为黑色,填充颜色为白色,以显示方向,而不是默认方向。请提出实现此目标的最佳方法。

我试图通过DirectionsRenderer图标选项实现这一目标。

以下是代码或相同的代码:

<script>
      var map;
      var directionsService, directionsDisplay;

      function initMap() {

        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 50.6072352, lng: 6.3027546},
          zoom: 8
        });
        var infowindow = new google.maps.InfoWindow;
        var lineSymbol = {
          path: 'm 0,0 0,1',
          strokeOpacity: 1,
          strokeWeight:1.5,
          strokeColor: '#58595b',
          scale: 1,
          rotation:0,
          anchor: {x:-2.5, y:0}
        };  
        var lineSymbol2 = {
          path: 'm 0,0 0,1',
          strokeOpacity: 1,
          strokeWeight:1.5,
          strokeColor: '#58595b',
          scale: 1,
          rotation:0,
          anchor: {x:2.5, y:0}
        };  
        directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer({
          polylineOptions: {
            strokeOpacity: 1,
            geodesic: true,
            icons: [{icon:lineSymbol, offset: '0', repeat:'0.5px'},
            {icon:lineSymbol2, offset: '0', repeat:'0.5px'}
            ],
            strokeColor:'white',
            strokeWeight: 5
          }
        });
        directionsDisplay.setMap(map);
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: 'DRIVING'
        };
        directionsService.route(request, function(result, status) {
          if (status == 'OK') {
            console.log(result);
            directionsDisplay.setDirections(result);
          }
        });
      }

    </script>

我可以达到this fiddle所示的效果,但是线条不清晰并且在某些点交叉。我想显示由Google地图显示的折线,以显示方向-具有不同的笔触和填充颜色。

0 个答案:

没有答案