javascript - 在 map 上用实线和虚线标记绘制路径

根据maps API v3上的文档，有两个单独的虚线和实线示例。我有一个经度和纬度数组，我想在坐标之间标记实线和点划线的替代标记。
 代码是

    var lat_lng = new Array();
    var latlngbounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markers.length; i++) {
        var data = markers[i];
        var myLatlng = new google.maps.LatLng(data.lat, data.lng);
        lat_lng.push(myLatlng);
      var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: data.title
        });
      //  console.log(i%2);

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



        latlngbounds.extend(marker.position);
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent("Location:"+data.location_name+"<br> Battery Status :"+data.battery_status+"<br> Form :"+data.tablename+"<br> Status :"+data.status+"<br> Time :"+new Date(data.time)+"<br> Weather :"+data.weather);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
    //***********ROUTING****************//
    //Initialize the Path Array
    var path = new google.maps.MVCArray();
    //Initialize the Direction Service
    var service = new google.maps.DirectionsService();

    //Set the Path Stroke Color
    if(i%2==0)
  {
        var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7',strokeOpacity: 0,
              icons: [{
                icon: lineSymbol,
                offset: '0',
                repeat: '20px'
              }], });
  }
else
  {
    var poly = new google.maps.Polyline({ map: map, strokeColor: '#4986E7'});

  }

我在最后用一个箱子画线，但一次只用一个实线或虚线即可。

最佳答案

单个google.maps.Polyline只能具有一种样式（实线与虚线）。您需要将需要不同样式的每个线段单独设置为折线。

proof of concept fiddle

代码段：

var geocoder;
var map;
var markers = [{
  lat: 42,
  lng: -72,
  title: "0"
}, {
  lat: 43,
  lng: -73,
  title: "1"
}, {
  lat: 43,
  lng: -74,
  title: "2"
}, {
  lat: 42,
  lng: -75,
  title: "3"
}, {
  lat: 41,
  lng: -76,
  title: "4"
}];


function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var lat_lng = [];
  var latlngbounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    var data = markers[i];
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: data.title
    });
    //  console.log(i%2);

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



    latlngbounds.extend(marker.position);
    (function(marker, data) {
      google.maps.event.addListener(marker, "click", function(e) {
        infoWindow.setContent("Location:" + data.location_name + "<br> Battery Status :" + data.battery_status + "<br> Form :" + data.tablename + "<br> Status :" + data.status + "<br> Time :" + new Date(data.time) + "<br> Weather :" + data.weather);
        infoWindow.open(map, marker);
      });
    })(marker, data);
    //***********ROUTING****************//
    if (lat_lng.length > 1) {
      //Set the Path Stroke Color
      if (i % 2 == 0) {
        var poly = new google.maps.Polyline({
          map: map,
          strokeColor: '#4986E7',
          strokeOpacity: 0,
          icons: [{
            icon: lineSymbol,
            offset: '0',
            repeat: '20px'
          }],
          path: lat_lng
        });
      } else {
        var poly = new google.maps.Polyline({
          map: map,
          strokeColor: '#4986E7',
          path: lat_lng
        });

      }
      lat_lng = [];
      lat_lng.push(myLatlng);


    }
  }
  map.setCenter(latlngbounds.getCenter());
  map.fitBounds(latlngbounds);
}
google.maps.event.addDomListener(window, "load", initialize);

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

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