Google Maps API에서 클릭 한 후에 만 ​​정보창로드

Aug 17 2020

데이터베이스 ( allDbEntries.length) 에서 정보를 가져 오는 수백 개의 Google지도 마커가 있으며 , 각 마커 infowindow는 사용자가 마커를 클릭하면 열리는와 연결됩니다. 각각 infoWindow의 .NET Framework에는 하나 이상의 이미지 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
  })
}

문제는 제가 이것을 모바일 앱 (안드로이드) 또는 모바일 브라우저에서 사용하고 있으며지도가로드 될 때마다 수백 개의 이미지가 자동으로로드되어 모바일 장치의 대역폭을 소모한다는 것입니다.

htmlInfoContent마커를 클릭 한 후에 만 ​​마커 의 콘텐츠 (특히 이미지)를 로드하려면 어떻게 해야합니까?

개발자 도구에서 볼 수 있듯이 맵을 열 때마다 모든 이미지가로드되어 너무 많은 대역폭을 소비합니다.

답변

JoãoPimentelFerreira Aug 24 2020 at 19:31

해결책을 찾았습니다. 를 htmlInfoContent배열 에 넣어야 했고 클릭 이벤트 핸들러를 처리하는 함수를 반환하는 익명의 자체 호출 함수를 사용해야했습니다. 이런 식으로 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))
}