单个谷歌地图标记的多个信息窗口

Multiple Infowindows for a Single Google Maps Marker

本文关键字：信息 信息窗 窗口 谷歌 地图 图标 单个      更新时间：2023-09-26

有没有办法为一个谷歌地图标记创建多个信息窗口？

例如，如果一年中有几次交付到同一个地址，那么每一次交付的属性能否从该标记显示在可滚动的信息窗口中？

否则我会做一些非常肮脏的AJAX。

理论上，我只想创建一个contentStrings数组，如谷歌修改后的示例所示。理想情况下，这将显示为信息窗口中的可导航转盘。

function initMap() {
  var uluru = {lat: -25.363, lng: 131.044};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  **var contentString = ['contentString1','contentString2','contentString3'];**
  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
}

单个标记的简单概念验证，单击"下一步"按钮时遍历字符串数组：

function initMap() {
  var uluru = {
    lat: -25.363,
    lng: 131.044
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: uluru
  });
  infowindow = new google.maps.InfoWindow({
    content: contentString[0] + "<br><input type='button' onclick='next(1);' value='next' />"
  });
  var marker = new google.maps.Marker({
    position: uluru,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });
  map.addListener('click', function() {
    infowindow.close();
  });
}
var contentString = ['contentString1', 'contentString2', 'contentString3'];
var infowindow;
function next(i) {
  var next = i + 1;
  if (next >= contentString.length) {
    next = 0;
  }
  infowindow.setContent(contentString[i] + "<br><input type='button' onclick='next(" + next + ");' value='next' />")
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

相关文章：