Карты Google получают полилинию с точками

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>

Answer 2

После некоторого анализа я обнаружил, что есть несколько вариантов.

Самый гибкий вариант - это опция от MrUpsidedown.Это показывает пунктирную линию, которая, кажется, работает довольно хорошо для небольших наборов данных.Кроме того, дополнительная настраиваемость с этой опцией является предпочтительной.Тем не менее, чем больше мой набор данных, тем больше улучшений производительности у меня было благодаря использованию комплексных маркеров.

Сравнение по примерно 2000 точкам:

• Подход по кругу занял 3 секунды для рендеринга

• Пользовательский символ, рисующий ромбы вместо кругов, занимал от 2 до 3 секунд.

• Сложные маркеры, точечное изображение, упомянутое ниже, занимали меньшечем 1 секунда.

Подход, который я использовал со сложными маркерами, заключается в следующем: я использую простые точечные изображения размером 9x9 пикселей от Google.

Изображенияточки, которые я использовал в качестве маркеров, можно найти в другой теме stackoverflow здесь

Фактический код, который я использовал для рисования точки, будет добавлен внизу.Напомним, что я не определял активируемую область маркера, так как не собирался, чтобы он был неразрешимым.Надеюсь, это кому-нибудь поможет!

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;
    }
}