Nano Hash - криптовалюты, майнинг, программирование

Несколько маркеров Google Maps API v3 не работают из-за пользовательских изображений?

Я использую текущий код, основанный на примере Google , он отлично работает с одним маркером, но когда я пытаюсь использовать несколько маркеров, он терпит неудачу.

Я думаю, что это может быть связано с моим собственным изображением маркера, но не уверен, так как я не очень хорош в этом... У кого-нибудь есть идеи?

function initialize() {

  var beaches = [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
  ];

  var myLatLng = new google.maps.LatLng(beach[1], beach[2], beach[3]);
  var mapPKCanvas = document.getElementById('main-map');

  var mapPKOptions = {
    center: new google.maps.LatLng(-33.890542, 151.274856),
    zoom: 15,
    draggable: true,
    scrollwheel: false,
    mapTypeControl: false,
    scaleControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)
  var url = 'https://www.customimage-map.png';
  var size = new google.maps.Size(64, 78);
  if (window.devicePixelRatio > 1.5) {
    url = 'https://www.customimage-mapx2.png';
    size = new google.maps.Size(64, 78);
  }
  var image = {
    url: url,
    size: size,
    scaledSize: new google.maps.Size(64, 78),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(18, 20)
  };
  var marker = new google.maps.Marker({
    position: myLatLng.getCenter(),
    map: mainMapPK,
    icon: image
  });

  marker.addListener('click', function() {
    infowindow.open(mainMapPK, marker);
  });

  google.maps.event.trigger(mainMapPK, "resize");

}

google.maps.event.addDomListener(window, 'load', initialize);
google-maps google-maps-api-3
31.07.2019

Ответы:


1

Предполагая, что путь к вашему изображению правильный, я не вижу никаких проблем с реализацией ваших пользовательских маркеров. Однако я вижу несколько проблем в опубликованном вами фрагменте кода.

Во-первых, beach не существует. Должно быть beaches. Кроме того, это массив 2d, поэтому вы должны соответствующим образом обращаться к координатам:

google.maps.LatLng(beaches[0][1], beaches[0][2])  // -33.890542, 151.274856

Во-вторых, для установки позиции вашего маркера вы используете getCenter(), который является классом LatLng. не поддерживает. Если вы хотите использовать getCenter(), используйте вместо него класс LatLngBounds. . В противном случае просто установите положение маркера на LatLng как есть.

Попробуйте приведенный ниже пример измененного кода:

<div id="main-map" style="height:450px;"></div>

<script>
    function initialize() {

        var beaches = [
            ['Bondi Beach', -33.890542, 151.274856, 4],
            ['Coogee Beach', -33.923036, 151.259052, 5],
            ['Cronulla Beach', -34.028249, 151.157507, 3],
        ];

        var mapPKCanvas = document.getElementById('main-map');

        var mapPKOptions = {
            center: new google.maps.LatLng(-33.890542, 151.274856),
            zoom: 10,
            draggable: true,
            scrollwheel: false,
            mapTypeControl: false,
            scaleControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var mainMapPK = new google.maps.Map(mapPKCanvas, mapPKOptions)

        var url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png';

        var size = new google.maps.Size(64, 78);

        if (window.devicePixelRatio > 1.5) {
            url = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png';
            size = new google.maps.Size(64, 78);
        }

        var image = {
            url: url,
            size: size,
            scaledSize: new google.maps.Size(64, 78),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(18, 20)
        };

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[2][1], beaches[2][2]),
            map: mainMapPK,
            icon: image
        });

        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[1][1], beaches[1][2]),
            map: mainMapPK,
            icon: image
        });

        var marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
            map: mainMapPK,
            icon: image
        });
    }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize"></script>

Надеюсь это поможет!

02.08.2019
  • Спасибо, это блестяще, однако я не могу заставить его работать. Мне нужен определенный API, включенный с помощью ключа, я только что включил карты по умолчанию? 05.08.2019
  • В моем коде выше вам нужно заменить YOUR_API_KEY ключом API вашего собственного проекта. Также вам необходимо, чтобы в вашем проекте был включен JavaScript API, а также включена оплата, чтобы API вообще работал. См. это руководство. Пожалуйста, держите меня в курсе. :) 05.08.2019
  • Спасибо, Эван, я использовал текущий ключ API, так как у нас уже есть 2 пользовательские карты, работающие со следующими включенными... API геокодирования, API геолокации, API встраивания карт, API JavaScript карт. Нужны ли мне другие? 06.08.2019
  • Для приведенного выше примера кода вам нужно только включить JavaScript API. У вас также включен биллинг? Какие ошибки вы получаете при тестировании с помощью вашего ключа API? Попробуйте этот JSbin: jsbin.com/mibugekegi/edit?html,console,output 06.08.2019
  • Рад слышать! :) 06.08.2019
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..