Question

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

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

因此，我的问题是。我可以得到一种快速绘制的折线来绘制看起来与我现在完全一样的折线吗？该图像显示了我正在寻找的更多内容。

我希望有人能帮助我。

Answer 1

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

hmac.update(value, secret)

const getMessageSignature = (path, request, secret, nonce) => {
    // API-Sign = Message signature using HMAC-SHA512 of (URI path + SHA256(nonce + POST data)) and base64 decoded secret API key
    const message = JSON.stringify(request);
    const hash = CryptoJS.SHA256(nonce + message);
    const secret_buffer = CryptoJS.enc.Base64.parse(secret);
    const hmac = CryptoJS.algo.HMAC.create(CryptoJS.algo.SHA512, secret_buffer);
    hmac.update(path, secret_buffer);
    hmac.update(hash, secret_buffer);
    return hmac.finalize().toString(CryptoJS.enc.Base64);
};

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();

Answer 2

经过分析，我发现有两个选择。

最灵活的选项是MrUpsidedown的选项。这显示了一条虚线，对于较小的数据集似乎效果很好。此外，最好使用此选项来增加可定制性。但是，我的数据集越大，使用复杂的标记所获得的性能提升越多。

对比2000点：

圆形方法渲染了3秒
一个自定义符号，绘制菱形而不是圆形需要2到3秒钟。
复杂标记（下面提到的点图像）花费了不到1秒的时间。

我使用复杂标记的方法如下：我使用来自Google的9x9像素的简单点图像。

可以找到我用作标记的点的图像at another stackoverflow 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;
    }
}

Google Maps获得带点的折线

2 个答案: