Di Google Maps API, muat jendela arus hanya setelah diklik

Aug 17 2020

Saya memiliki beberapa ratus penanda Google Maps yang infonya diambil dari database ( allDbEntries.length), setiap penanda yang terkait dengan infowindowyang terbuka setelah pengguna mengklik penanda. Masing-masing infoWindowmemiliki satu atau lebih URL gambar di dalamnya 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
  })
}

Masalahnya adalah saya menggunakan ini untuk aplikasi seluler (Android) atau bahkan untuk peramban seluler, dan setiap kali peta dimuat, ratusan gambar dimuat secara otomatis menghabiskan bandwidth perangkat seluler.

Bagaimana saya bisa memuat konten htmlInfoContent(terutama gambar) di penanda hanya setelah mengklik penanda itu?

Seperti yang Anda lihat dari Dev Tools, setiap kali saya membuka peta, semua gambar yang dimuat memakan terlalu banyak bandwidth

Jawaban

JoãoPimentelFerreira Aug 24 2020 at 19:31

Menemukan solusinya. Saya harus meletakkan htmlInfoContentin sebuah array, dan saya harus menggunakan fungsi pemanggilan otomatis anonim yang mengembalikan fungsi yang berhubungan dengan event handler klik. Dengan cara ini konten html hanya disetel setelah penanda diklik.

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))
}