Блог

У меня есть несколько сотен маркеров Google Maps, информация о которых извлекается из базы данных ( allDbEntries.length ), каждый маркер связан с infowindow , который открывается после того, как пользователь нажимает на маркер. У каждого infoWindow есть один или несколько URL-адресов изображения в его htmlInfoContent .

 const map = new google.maps.Map(document.getElementById('map'), mapOptions)
// Add the markers and infowindows to the map
for (var i = 0; i < allDbEntries.length; i  ) {
  const el = allDbEntries[i]
  const marker = new google.maps.Marker({
    position: { lat: el.data_coord_latit, lng: el.data_coord_long },
    map: map,
    title: el.car_brand   ' '   el.car_model
  })

  var htmlInfoContent = ''

  for (var photoIndex = 1; photoIndex <= 4; photoIndex  ) {
    if (el['foto'   photoIndex]) {
      const photoUrl = requestImageUrl   el['foto'   photoIndex]
      htmlInfoContent  = `<img width="200" src="${photoUrl}"><br>`
    }
  }

  const infowindow = new google.maps.InfoWindow({
    content: htmlInfoContent
  })

  marker.addListener('click', (e) => {
    infowindow.open(map, marker)
    return true
  })
}
  

Проблема в том, что я использую это для мобильного приложения (Android) или даже для мобильных браузеров, и каждый раз, когда загружается карта, автоматически загружаются сотни изображений, потребляющих пропускную способность мобильного устройства.

Как я могу загрузить содержимое htmlInfoContent (особенно изображения) в маркер только после нажатия на этот маркер?

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

Найдено решение. Мне пришлось поместить htmlInfoContent в массив, и мне пришлось использовать анонимную самозваную функцию, которая возвращала функцию, которая имеет дело с обработчиком события click. Таким образом, html-содержимое устанавливается только после нажатия на маркер.

 const map = new google.maps.Map(document.getElementById('map'), mapOptions)
const infowindow = new google.maps.InfoWindow()
var htmlInfoContent = []

// Add the markers and infowindows to the map
for (var i = 0; i < allDbEntries.length; i  ) {
  const el = allDbEntries[i]
  const marker = new google.maps.Marker({
    position: { lat: el.data_coord_latit, lng: el.data_coord_long },
    map: map,
    title: el.car_brand   ' '   el.car_model
  })

  var htmlInfoContent[i] = ''

  for (var photoIndex = 1; photoIndex <= 4; photoIndex  ) {
    if (el['foto'   photoIndex]) {
      const photoUrl = requestImageUrl   el['foto'   photoIndex]
      htmlInfoContent[i]  = `<img width="200" src="${photoUrl}"><br>`
    }
  }

  google.maps.event.addListener(marker, 'click', (function (marker, i) {
    return function () {
      infowindow.setContent(htmlInfoContent[i])
      infowindow.open(map, marker)
    }
  })(marker, i))
}