0

Друзья, очень нужна помощь, всю голову сломал, есть Google карта, с массивом адресов:

var locations = [
['Москва, Россия', 'Москва', 'infowindow 1'],
['Барнаул, Россия', 'Барнаул', 'infowindow 2'],
['Улан-Удэ, Россия', 'Улан-Удэ', 'infowindow 3']
];

Далее из адресов получаем позицию на карте с помощью функции geocode и в цикле расставляем маркеры на карте, и по клику переходим перемещаемся по ним.

Но вот беда, при загрузке карты, центр карты ставится на ПОСЛЕДНИЙ элемент массива, на последний адрес, на последний маркер. А мне нужно на первый, как это сделать ума не приложу, уже все испробовал :( помогите пожалуйста.

Вот поднял пример https://codepen.io/Cheizer/pen/ZgKPNG

Как видите адрес начальный ставится на Улан-Удэ, а нужно на Москву. Как это сделать?

1
  • Проблема похоже в том, что запускаются 3 асинхронных запроса на геокодировании, в каком порядке они отработают - чистый рандом. А нужно сначала дождаться когда они все отработают, а уже затем выставлять позицию карты. Но как это сделать, я не понимаю :(
    – Cheizer
    1 авг 2019 в 18:07

2 ответа 2

0

Вот пример моего кода, который реализовывает эту задачу.

    const data = [
    {id: "1", fullname: "FirstName LastName",
    address: "Canada, 1150-206, Lisbon metropolitan area, Lisbon, R. Júlio de 
    Andrade 3"
    latitude: 38.719463
    longitude: -9.1410403
},
   {
id: "2",   address: "Panama, 65806-2543, Missouri, Springfield"
    fullname: "Ivan Petrov"
    latitude: 37.2034299
    longitude: -93.2935778
   }]

data.forEach(item => {
        item.coords = new google.maps.LatLng(+item.latitude, +item.longitude);
        this.listPersons.push(item);
      });

const bounds = extendBounds(this.listPersons);
      map.setCenter(bounds.getCenter());
      map.fitBounds(bounds);
      setTimeout(() => {
        setCorrectZoom(map);
      }, 200);

function extendBounds(listCoords) {
      const bounds = new google.maps.LatLngBounds();
      listCoords.forEach(item => {
        bounds.extend(item.coords);
      });
      return bounds;
    };

function setCorrectZoom(map) {
      const currentZoom = map.getZoom();
      if (currentZoom > 15) {
        map.setZoom(15);
      }
    };
7
  • Спасибо, но не совсем понял в каком месте это использовать в моем случае, это в самой geocoding? Или после inicialize? И зачем там setTimeout?
    – Cheizer
    1 авг 2019 в 13:10
  • После того, как получите координаты и создадите маркеры - используйте этот код. Все методы нативные. SetTimeout можете не использовать. Ваш код не смотрел
    – Dmytro
    1 авг 2019 в 13:13
  • попробовал уже, ничего не меняется и ругается на forEach : Uncaught TypeError: Cannot read property 'forEach' of undefined
    – Cheizer
    1 авг 2019 в 13:17
  • Можно на ваш целый код взглянуть? Есть результат его работы? По куску мне сложно понять как это встроить в мой код.
    – Cheizer
    1 авг 2019 в 13:19
  • Ну так Вы же должны адаптировать этот код, под свой. В итерируемом массиве должны быть поле с координатами и т.д.
    – Dmytro
    1 авг 2019 в 13:19
0

Решение, в цикле добавить

  for (var i = 0; i < locations.length; i++) {
    //geocodeAddress(locations[i]);
  geocodeAddress(locations[i], i == 0);
}

И в функцию geocodeAddress добавить аргумент isSetToCenterMap, и сделать на него проверку пере установкой центра карты

 if (isSetToCenterMap){
       map.setCenter(results[0].geometry.location);
   }

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.