Google Map路线使用折线的放样者错过路点的一些路线

问题描述

我正在使用Google Map API。我想在地图上显示虚线路线。如果我将polylineDotted对象添加到google.maps.DirectionsRenderer，它会错过地图上的某个路径。在A点和B点之间缺少路线（请检查我的

代码段：
$ b

  var directionDisplay; var directionsService = new google.maps.DirectionsService（）; var map; var infoWindow = new google.maps.InfoWindow（）; function initialize（）{var lineSymbol = {path：google.maps.SymbolPath.CIRCLE， fillOpacity：1，scale：3}; var polylineDotted = {strokeColor：'＃9966ff'，strokeOpacity：0，fillOpacity：0，图标：[{icon：lineSymbol，offset：'0'，repeat：'10px'}]，}; var rendererOptions = {map：map，suppressMarkers：false，polylineOptions：polylineDotted}; directionsDisplay = new google.maps.DirectionsRenderer（rendererOptions）; var center = new google.maps.LatLng（0，0）; var myOptions = {zoom：7，mapTypeId：google.maps.MapTypeId.ROADMAP，center：center}; map = new google.maps.Map（document.getElementById（map-canvas），myOptions）; directionsDisplay.setMap（地图）; var start =纽约市拉斐特大街212号; var end =Myrtle Avenue 11612，New York City; var method ='DRIVING'; var request = {origin：start，waypoints：[{location：Jackie Robinson Pkwy Brooklyn，New York City，stopover：true}]，destination：end，travelMode：google.maps.DirectionsTravelMode [method]}; directionsService.route（request，function（response，status）{if（status == google.maps.DirectionsStatus.OK）{directionsDisplay.setDirections（response）; var iwContent = response ['routes'] [0] .legs [0 ] .distance.text +'< br />'+ response ['routes'] [0] .legs [0] .duration.text; infoWindow.setContent（iwContent）;}}）; google.maps.event.addListener（polylineDotted，'click'，function（event）{infoWindow.setPosition（event.latLng）; infoWindow.open（map，this）;}）; google.maps.event.addListener（map，'click'，function（）{infoWindow.close（）;}）;} initialize（）;  

 ＃map-canvas {height：400px;}  

 < script src =https://maps.googleapis.com/maps/api/js>< / script>< div id =map-canvas>< / div>  

I'm using the Google Map API. I want to show the dotted routes in map. If I add polylineDotted object to google.maps.DirectionsRenderer, it will miss some path on the map. Between point A and point B route is missing(please check my jsfiddle).

I had tried not using polylineDotted, it will be OK.

var polylineDotted = new google.maps.Polyline({
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
});

Example code

My wish features must in could:

1. List item
2. Color #9966ff
3. Dotted routes
4. Multiple waypoints

解决方案

polylineDotted should be a PolylineOptions object, not a Polyline.

This:

var polylineDotted = new google.maps.Polyline({
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
})

should be:

var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
        icon: lineSymbol,
        offset: '0',
        repeat: '10px'
    }],
};

proof of concept fiddle

code snippet:

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infoWindow = new google.maps.InfoWindow();

function initialize() {

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    scale: 3
  };

  var polylineDotted = {
    strokeColor: '#9966ff',
    strokeOpacity: 0,
    fillOpacity: 0,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '10px'
    }],
  };

  var rendererOptions = {
    map: map,
    suppressMarkers: false,
    polylineOptions: polylineDotted
  };

  directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

  var center = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  var start = "Lafayette Avenue 212, New York City";
  var end = "Myrtle Avenue 11612, New York City";
  var method = 'DRIVING';
  var request = {
    origin: start,
    waypoints: [{
      location: "Jackie Robinson Pkwy Brooklyn, New York City",
      stopover: true
    }],
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var iwContent = response['routes'][0].legs[0].distance.text + '<br />' + response['routes'][0].legs[0].duration.text;
      infoWindow.setContent(iwContent);
    }
  });

  google.maps.event.addListener(polylineDotted, 'click', function(event) {

    infoWindow.setPosition(event.latLng);
    infoWindow.open(map, this);
  });

  google.maps.event.addListener(map, 'click', function() {

    infoWindow.close();
  });
}

initialize();

#map-canvas {
  height: 400px;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>

这篇关于Google Map路线使用折线的放样者错过路点的一些路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！