拖动后Google Maps折线无法正确显示

Question

我使用的是Google Maps API，如果使用默认的折线，即使将其拖动也可以。 但是我希望用户能够拥有多个路线（在这一点上，我想为他们明显地涂上不同的颜色）。

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

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

有人知道如何在拖动到新方向后防止折线出现毛刺吗？

在被拖动之前：

（哪个是对的）

拖动后（显示该行已被剪切且更不透明）：

为了澄清起见：在这两种情况下，路线仍然是通往贝克的Streator，路线的KM是正确的（包括拖动后的绕行），只是路线在航路点被切断。

精确地表达我的意思： http : //jsfiddle.net/qmsjjbzw/点击提交按钮，然后拖动路线以查看我的意思。

代码段（来自链接的小提琴）：

 // 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>