google map polyline пунктирные и двойные линии

Question

У меня есть карта логарифма google sample here с четырьмя координатами. Я нарисовал пунктирную линию, используя символ свойство, как,

var lineSymbol = { 
     path: 'M 0,-1 0,1', 
     strokeOpacity: 1, 
     strokeWeight: 2, 
     scale: 3 
    }; 

    var lineCoordinates = [ 
    new google.maps.LatLng(22.291, 153.027), 
    new google.maps.LatLng(18.291, 153.027), 
    new google.maps.LatLng(15.291, 153.027), 
    new google.maps.LatLng(11.291, 153.027)]; 

    var line = new google.maps.Polyline({ 
     path: lineCoordinates, 
     strokeOpacity: 0, 
     icons: [{ 
      icon: lineSymbol, 
      offset: '50%', 
      repeat: '15px' 
     }], 
     strokeColor: '#FF0000', 
     map: map 
    }); 

Но как я могу нарисовать пунктирную линию только между вторым и третьими координатами и двойной линией между третьим и четвертым?

Answer 1

Вы не можете создавать отдельные сегменты одной полилинии. Вы должны сделать отдельные полилинии, а затем применить стиль, который вы хотите каждой отдельной полилинии:

var lineCoordinates = [ 
new google.maps.LatLng(22.291, 153.027), 
new google.maps.LatLng(18.291, 153.027), 
new google.maps.LatLng(15.291, 153.027), 
new google.maps.LatLng(11.291, 153.027)]; 

for (var i = 0; i < lineCoordinates.length - 1; i++) { 
    var line = new google.maps.Polyline({ 
     path: [lineCoordinates[i], lineCoordinates[i + 1]], 
     strokeOpacity: 0, 
     icons: icons[i], 
     strokeColor: color[i], 
     map: map 
    }); 
} 

proof of concept fiddle

фрагмент кода:

var geocoder; 
 
var map; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(18.291, 153.027), 
 
     zoom: 5, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var lineSymbol = { 
 
    path: 'M 0,-1 0,1', 
 
    strokeOpacity: 1, 
 
    strokeWeight: 2, 
 
    scale: 3 
 
    }; 
 
    var doubleLine = { 
 
    path: 'M 0.5,-1 0.5,1 M -0.5,-1 -0.5,1', 
 
    strokeOpacity: 1, 
 
    strokeWeight: 1, 
 
    scale: 3 
 
    }; 
 
    var color = ["#FF0000", "#FF00FF", "#0000FF"]; 
 
    var icons = [ 
 
    [{ 
 
     icon: lineSymbol, 
 
     offset: '0%', 
 
     repeat: '6px' 
 
    }], [{ 
 
     icon: lineSymbol, 
 
     offset: '50%', 
 
     repeat: '15px' 
 
    }], 
 
    [{ 
 
     icon: doubleLine, 
 
     offset: '0%', 
 
     repeat: '6px' 
 
    }] 
 
    ]; 
 

 
    var lineCoordinates = [ 
 
    new google.maps.LatLng(22.291, 153.027), 
 
    new google.maps.LatLng(18.291, 153.027), 
 
    new google.maps.LatLng(15.291, 153.027), 
 
    new google.maps.LatLng(11.291, 153.027) 
 
    ]; 
 

 
    for (var i = 0; i < lineCoordinates.length - 1; i++) { 
 
    var line = new google.maps.Polyline({ 
 
     path: [lineCoordinates[i], lineCoordinates[i + 1]], 
 
     strokeOpacity: 0, 
 
     icons: icons[i], 
 
     strokeColor: color[i], 
 
     map: map 
 
    }); 
 
    } 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>