Как добавить маркеры на Google Maps после того, как карта уже загружена?

Я работаю над простым приложением phoneGap — хожу по дому, собирая координаты:

var positions = [
  {lat:123.12313123, lng:123.123345131},
  {lat:123.12313123, lng:123.123345131}
]

Я просматриваю здесь документацию, которая работает безупречно. Насколько я понимаю, в этом примере сценарий defer async срабатывает при создании initMap(). initMap() имеет один маркер. Это работает безупречно в моем приложении, показывая маркер в Straya.

Сначала я создаю карту:

var map; // making it global

  function initMap() {
    var myLatLng = {lat: 39.909736, lng: -98.522109}; // center US

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });
  }

Это рисует карту. Теперь я хотел бы перебрать мои координаты так:

// Remember, the map has already loaded at this point
$(positions).each(function(i, item) {
          var marker = new google.maps.Marker({
            position: item,
            map: map,
            title: 'Route item ' + i
          });
        })

Это не работает. Я не могу запускать initMap() внутри цикла, и это все равно не работает. Я не могу запустить initMap() с заранее установленным количеством координат, потому что я еще не знаю, что это такое, пока не закончу. Что я здесь делаю неправильно?


google-maps android cordova javascript google-maps-api-3
person dsp_099    schedule 25.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Это проблема масштаба. Когда вы инициализируете карту, вы говорите var map, что создает локальную переменную с именем map внутри функции initMap. это означает, что глобальная переменная map все еще не инициализирована, и когда вы создаете свой маркер, он не помещает его на карту, потому что переменная map, которую вы передаете маркеру, не определена. Удалите ключевое слово var, и ваша новая карта будет назначена исходной глобальной переменной map вне функции, например:

var map; // making it global

  function initMap() {
    myLatLng = {lat: 39.909736, lng: -98.522109}; // center US

    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });
  }

Кроме того, в качестве несвязанной заметки, я думаю, вы неправильно понимаете, что делает асинхронная отсрочка. Когда вы загружаете скрипт с атрибутами async и defer, вы говорите браузеру подождать, пока не загрузится вся страница, а затем загрузить скрипт. В случае с картами Google в фактическом URL-адресе скрипта вы также передаете имя функции для вызова при загрузке скрипта: &callback=initMap.

Таким образом, браузер загружает всю страницу, затем получает скрипт карт Google, затем выполняет скрипт карт Google, который готовит код карт Google для использования, а затем этот код вызывает initMap.

person suddjian    schedule 25.04.2016

arrow_upward
0
arrow_downward

Я могу видеть проблему - вы объявляете map дважды, один раз вне функции initMap и один раз внутри. Это означает, что глобальная переменная map останется undefined. Удалите var перед заданием:

map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: myLatLng
    });

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

Кроме того, не забывайте, что часто лучше избегать этих глобальных переменных, когда это возможно :)

person Ian Walker-Sperber    schedule 25.04.2016