Google 地图得到一条带点的折线

Question

在 Javascript Google Maps API v3 中可以绘制可移动的折线。这正是我希望我的折线看起来的样子，但是，它不需要是可移动的。

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

所以我的问题是。我能否获得一种快速绘制的替代方法来绘制看起来与我现在拥有的一模一样的多段线？该图片显示了我正在寻找的更多内容。

希望有人能帮助我。

Answer 1

经过一些分析，我发现有几个选项。

最灵活的选项是MrUpsidedown的选项。这显示了一条很好的虚线，它似乎适用于较小的数据集。此外，使用此选项增加的可定制性是首选。但是，我的数据集越大，通过使用复杂标记获得的性能改进就越大。

2000点左右的比较：

圆形方法用了 3 秒来渲染
自定义符号，绘制菱形而不是圆形需要 2 到 3 秒。
复杂的标记，下面提到的点图，用了不到1秒。

我对复杂标记采用的方法如下：我使用来自 google.

的 9x9 像素的简单点图像

可以找到我用作标记的点的图像at another Whosebug topic here

我用来绘制点的实际代码将在底部添加。请记住，我没有定义标记的可点击区域，因为我不打算让它难以处理。希望对大家有帮助！

function drawMarkers(locations, color) {
    let colors = ['green', 'yellow', 'purple', 'blue', 'red'];
    if (colors.indexOf(color) < 0) {
        console.log("Color ", color, " not supported");
        return [];
    } else {
        let image = {
            url: 'img/dot-' + color + ".png",
            size: new google.maps.Size(6, 6),
            // The origin for this image is (0, 0).
            origin: new google.maps.Point(0, 0),
            // The anchor for this image is the base of our point.
            anchor: new google.maps.Point(3, 3)
        };

        let allMarkers = [];
        for (let i = 0; i < locations.length; i++) {
            let location = locations[i];
            let marker = new google.maps.Marker({
                position: location,
                map: map,
                icon: image,
                zIndex: 5
            });
            allMarkers.push(marker);
        }
        return allMarkers;
    }
}

Answer 2

当然可以。使用折线和现有符号。如果这还不够好，请使用 custom symbols.

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>

Google 地图得到一条带点的折线

Google Maps get a polyline with dots

javascript

google-maps

polyline

google-maps-api-3