0
我试图使用SVG图标像这样绘制在谷歌地图的多色折线在谷歌地图的精确折线:是否有可能使用SVG图标
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(26, -48),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var color = ["#FF0000", "#FFFF00"];
var Coordinates = [
new google.maps.LatLng(29, -51),
new google.maps.LatLng(29, -50),
new google.maps.LatLng(26, -50),
new google.maps.LatLng(26, -51),
new google.maps.LatLng(29, -51)];
for(var i = 0; i < Coordinates.length-1; i ++)
{
for(var j = 0; j < color.length; j ++)
{
\t var polyline = {
strokeWeight : 3,
path: [Coordinates[i], Coordinates[i+1]],
strokeOpacity: 0,
icons: [{
icon: {
path: 'M 0,' + ((j)*10) + ' 0,' + ((j+1)*10),
strokeOpacity: 1,
strokeWeight: 3,
scale: 1
},
repeat: '20px'
}],
strokeColor: color[j],
map: map
}
new google.maps.Polyline(polyline);
console.log(polyline);
}
}
Coordinates = [
new google.maps.LatLng(29, -49),
new google.maps.LatLng(29, -48),
new google.maps.LatLng(26, -48),
new google.maps.LatLng(26, -49),
new google.maps.LatLng(29, -49)];
for(var i = 0; i < Coordinates.length-1; i ++)
{
var polyline = {
strokeWeight : 3,
path: [Coordinates[i], Coordinates[i+1]],
strokeOpacity: 1,
strokeColor: color[0],
map: map
}
new google.maps.Polyline(polyline);
console.log(polyline);
}
}
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?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
到目前为止,我我无法做出完美的广场,所以我无法制定精确的路线指示。 使用这种方法可以准确测定LatLong coordonate吗?
聪明。你指出了我正确的方向。这是一个附加颜色的例子:https://jsfiddle.net/9kkppqag/1/。谢谢你的帮助 :) – Odubuc