是否可以使用SVG图标在GoogleMaps中获得准确的折线

Question

我正在尝试使用svg图标在Google地图中绘制多色折线：

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 ++)
        {
        	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上准确吗？

Answer 1

如果图标小于10px，则更好：

＆＃13;

＆＃13;

var geocoder;
var map;

function initialize() {

  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(28, -48),
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var color = ["#FF0000", "#FFFF00", '#0000FF'];

  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++) {

    var polyline = {
      strokeWeight: 3,
      strokeColor: color[1],
      path: [Coordinates[i], Coordinates[i + 1]],
      strokeOpacity: 1,
      icons: [{
          icon: {
            path: 'M 0,0 0,2',
            strokeOpacity: 1,
            strokeWeight: 3,
            strokeColor: color[0],
            scale: 1
          },
          repeat: '10px'
        }, {
          icon: {
            path: 'M 0,0 0,2',
            strokeOpacity: 1,
            strokeWeight: 3,
            strokeColor: color[2],
            scale: 1
          },
          repeat: '20px'
        }
        //and so on... ******************************************
      ],
      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);

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;