Как реализовать увеличение карты при нажатии на внешнюю кнопку?

Как реализовать возможность увеличения масштаба карты и перемещения к нужному маркеру при клике на элемент с атрибутом data-office-name "Это кнопка с названием офиса", используя представленный код на JavaScript?
  • 15 июля 2024 г. 9:32
Ответы на вопрос 2
Для реализации увеличения карты при нажатии на внешнюю кнопку, а также функционала увеличения масштаба и перемещения к нужному маркеру при клике на элемент с атрибутом data-office-name, можно воспользоваться следующим кодом на JavaScript:

```javascript
// Загрузка карты
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: {lat: 59.93863, lng: 30.31413} // Координаты центра карты
  });

  // Добавление маркеров на карту
  var marker1 = new google.maps.Marker({
    position: {lat: 59.93863, lng: 30.31413}, // Координаты маркера
    map: map,
    title: 'Офис 1'
  });

  var marker2 = new google.maps.Marker({
    position: {lat: 59.94205, lng: 30.32864}, // Координаты маркера
    map: map,
    title: 'Офис 2'
  });

  // Увеличение масштаба карты при нажатии на внешнюю кнопку
  document.getElementById('zoom-in').addEventListener('click', function() {
    var currentZoom = map.getZoom();
    map.setZoom(currentZoom + 1);
  });

  // Перемещение к нужному маркеру при клике на элемент с атрибутом data-office-name
  var officeButtons = document.querySelectorAll('[data-office-name]');
  officeButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      var officeName = this.getAttribute('data-office-name');

      if (officeName === 'Офис 1') {
        map.setCenter({lat: 59.93863, lng: 30.31413}); // Координаты офиса 1
        map.setZoom(15);
      } else if (officeName === 'Офис 2') {
        map.setCenter({lat: 59.94205, lng: 30.32864}); // Координаты офиса 2
        map.setZoom(15);
      }
    });
  });
}
```

В данном примере при клике на кнопку с id "zoom-in" будет увеличиваться масштаб карты, а при клике на элемент с атрибутом data-office-name и значением "Офис 1" или "Офис 2" карта будет перемещаться к соответствующему маркеру и увеличивать масштаб до значения 15.

Не забудьте добавить HTML разметку для кнопок с id "zoom-in" и элементов с атрибутом data-office-name для возможности их обработки в скрипте.
- if (map && typeof map.setCenter === 'function' && typeof map.setZoom === 'function') {
-     map.setCenter(15)(marker.geometry.getCoordinates(), 15);
-     map.setZoom(15);
- }
+ map.setLocation({
+   center: markersCollection.find(n => n.id === officeId).coordinate,
+   zoom: 15,
+ });
Похожие вопросы