Google 拖动后地图折线显示不正确

Question

我正在使用 google 地图 API，如果我使用默认折线，即使在被拖动后一切都很好。但我希望用户能够拥有多条路线（此时我想给它们涂上不同的颜色）。

var poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 6
});

如果我使用自定义多段线更改颜色，它在开始时正确显示，但如果您拖动方向以创建新路线，多段线会在标记处切断，变得更加不透明。

有谁知道如何防止多段线在向新方向拖动后出现故障？

被拖之前：

（正确）

被拖动后（显示线条被切断，更加不透明）：

说明一下：两种情况下的路线都是Streator到Baker，路线KM是正确的（包括拖动后的绕行），只是线路在航点被切断了。

正是我的意思的工作副本：http://jsfiddle.net/qmsjjbzw/ 点击提交按钮然后拖动路线以了解我的意思。

代码片段（来自链接 fiddle）：

// declare map as a global variable
var map;

// use google maps api built-in mechanism to attach dom events
google.maps.event.addDomListener(window, "load", function() {

  // create map
  map = new google.maps.Map(document.getElementById("map_div"), {
    center: new google.maps.LatLng(33.808678, -117.918921),
    zoom: 14,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsService = new google.maps.DirectionsService();

});

function submitRoute() {
  orig = "Streator, Il", dest = "Baker, Il";
  //fill out the request
  var request = {
    origin: orig,
    destination: dest,
    provideRouteAlternatives: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };

  //fill out the directionsservice
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {

      //render said directions
      renderResponse(response);

    } else alert("Unable to find route between \"" + orig +
      "\" and \"" + dest + "\".");
  });
}

//draws the route on the map and adds draggable listener
function renderResponse(response) {
  var poly = new google.maps.Polyline({
    strokeColor: '#FF0000',
    strokeOpacity: 0.6,
    strokeWeight: 6
  });

  rend = new google.maps.DirectionsRenderer({
    zoom: 4,
    draggable: true,
    map: map,
    directions: response,
    polylineOptions: poly
  });

  rend.addListener('directions_changed', function() {
    //draggable event goes here
  });
}

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}
h1,
p {
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>
<button onclick="submitRoute()">Submit</button>

Answer 1

路线显示不正确，因为 google.maps.DirectionsRenderer 的 polylineOptions 属性期望值是 PolylineOptions 类型，而不是的 google.maps.Polyline 类型，因此您可以替换：

polylineOptions: poly

和

polylineOptions: {
   strokeColor: '#FF0000',
   strokeOpacity: 0.6,
   strokeWeight: 6,
}

修改示例

/*
 * declare map as a global variable
 */
var map;

/*
 * use google maps api built-in mechanism to attach dom events
 */
google.maps.event.addDomListener(window, "load", function () {

    /*
     * create map
     */
    map = new google.maps.Map(document.getElementById("map_div"), {
        center: new google.maps.LatLng(33.808678, -117.918921),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    directionsService = new google.maps.DirectionsService();

});

function submitRoute() {
    orig = "Streator, Il", dest = "Baker, Il";
    //fill out the request
    var request = {
        origin: orig,
        destination: dest,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };

    //fill out the directionsservice
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {

            //render said directions
            renderResponse(response);

        } else alert("Unable to find route between \"" + orig +
  "\" and \"" + dest + "\".");
    });
}

//draws the route on the map and adds draggable listener
function renderResponse(response) {
    var poly = new google.maps.Polyline({
        strokeColor: '#FF0000',
        strokeOpacity: 0.6,
        strokeWeight: 6,
    });
    poly.setDraggable(true);

    rend = new google.maps.DirectionsRenderer({
        zoom: 4,
        draggable: true,
        map: map,
        directions: response,
        //polylineOptions: poly
        polylineOptions: {
            strokeColor: '#FF0000',
            strokeOpacity: 0.6,
            strokeWeight: 6,
        }
    });


    rend.addListener('directions_changed', function (e) {
    });
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<link href="style.css" rel="stylesheet" />
<div id="map_div" style="height: 400px;"></div>
<button onclick="submitRoute()">Submit</button>

Google 拖动后地图折线显示不正确

Google Maps polyline not displaying correctly after dragging

javascript

google-maps

google-maps-api-3

draggable

polyline