谷歌地图得到一条带点的折线

Question

在 Javascript Google Maps API v3 中，可以绘制可移动的折线。这正是我想要的折线的外观，但是，它不需要是可移动的。

现在，由于它是可移动的，因此需要花费更多时间来绘制这些折线。我必须画 20 条这样的线，因此最多 200 个点。与绘制这些线所需的正常时间相比，存在明显的滞后。

因此我的问题是。我能否获得一种快速绘制替代方案来绘制看起来与我现在拥有的完全一样的折线？该图像显示了我正在寻找的更多内容。

我希望有一个人可以帮助我。

Answer 1

你当然可以。使用折线和现有符号。如果这还不够好，请使用自定义符号。

function initialize() {

  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(0, 15),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);


  // Create the polyline and add the symbol via the 'icons' property.

  var lineCoordinates = [
    new google.maps.LatLng(0, 0),
    new google.maps.LatLng(0, 30)
  ];

  var lineSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    fillOpacity: 1,
    strokeOpacity: 1,
    strokeWeight: 2,
    fillColor: 'white',
    strokeColor: 'orange',
    scale: 5
  };

  var polyline = new google.maps.Polyline({
    path: lineCoordinates,
    strokeColor: 'orange',
    strokeOpacity: 1,
    strokeWeight: 3,
    draggable: true,
    map: map,
    icons: [{
      icon: lineSymbol,
      offset: '0',
      repeat: '20px'
    }],
  });
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>