在 Google 地图 API 上，仅在单击后加载信息窗口

Question

我有数百个 Google 地图标记，其信息是从数据库 (allDbEntries.length) 中获取的，每个标记都与一个 infowindow 关联，用户单击标记。每个 infoWindow 在其 htmlInfoContent 中有一个或多个图像的 URL。

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 内容（尤其是图像）？

正如您从 Dev Tools 中看到的那样，每次我打开地图时，所有图像都被加载，消耗了太多带宽

Answer 1

找到解决方案。我不得不将 htmlInfoContent 放在一个数组中，并且我不得不使用一个匿名的 self-invoking 函数返回处理点击事件处理程序的函数。这样，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))
}

在 Google 地图 API 上，仅在单击后加载信息窗口

On Google Maps API, load infowindow only after click

google-maps-api-3

cordova-plugins