Google Maps API'da, bilgi penceresini yalnızca tıklamadan sonra yükleyin

Aug 17 2020

Bilgileri bir veritabanından ( allDbEntries.length) getirilen , her bir işaretçi infowindowkullanıcı bir işaretçiyi tıkladıktan sonra açılan bir işaretle ilişkili yüzlerce Google Haritalar işaretleyicim var . Her infoWindowbirinin içinde bir veya daha fazla resmin URL'si vardır 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
  })
}

Sorun şu ki, bunu bir mobil APP (Android) için veya hatta mobil tarayıcılar için kullanıyorum ve harita her yüklendiğinde, mobil cihazın bant genişliğini tüketen yüzlerce görüntü otomatik olarak yükleniyor.

htmlInfoContentBir işaretçinin içeriğini (özellikle resimleri) ancak o işaretçiye tıkladıktan sonra nasıl yükleyebilirim ?

Dev Tools'dan görebileceğiniz gibi, haritayı her açtığımda, tüm görüntüler çok fazla bant genişliği tüketerek yükleniyor

Yanıtlar

JoãoPimentelFerreira Aug 24 2020 at 19:31

Çözümü buldum. htmlInfoContentBir diziye koymak zorunda kaldım ve tıklama olay işleyicisiyle ilgilenen işlevi döndüren anonim bir kendi kendini çağıran işlev kullanmak zorunda kaldım. Bu şekilde html içeriği yalnızca işaretçi tıklandıktan sonra ayarlanır .

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