google 地图 api 动画和多个信息窗口

Question

我正在尝试获取带有下拉标记的地图（每个都带有信息窗口）。多个标记必须以 HTML/CSS 按钮开头。信息窗口应该有不同的文本。我什至无法在每个信息窗口中使用相同的文本进行构建。在控制台浏览器中，我看到消息："SCRIPT445: Object doesn't support this action"。我根本无法触发 Infowidow。我的代码/使用 Google 示例/如下：

 <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8">
        <title>Marker animations with <code>setTimeout()</code></title>
        <style>
              html, body {
                height: 100%;
                margin: 0;
                padding: 0;
              }
              #map {
                height: 100%;
              }
        #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }

              #floating-panel {
                margin-left: -52px;
              }
            </style>
          </head>
          <body>
            <div id="floating-panel">
              <button id="drop" onclick="drop()">Drop Markers</button>
             </div>
            <div id="map"></div>
            <script  async defer
        src=         "https://maps.googleapis.com/maps/api/jssigned_in=true&libraries=places&callback=initMap">
         </script>
        <script>
        var neighborhoods = [
          {lat: 52.511, lng: 13.447, name: "2007"},
          {lat: 52.549, lng: 13.422, name: "2008"}, 
          {lat: 52.497, lng: 13.396, name: "2009"},
          {lat: 52.517, lng: 13.394, name: "2010"}
        ];

        var markers = [];
        var map;

        function initMap() {
          map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: {lat: 52.520, lng: 13.410}
          });
        }


        function drop() {
          clearMarkers();
          for (var i = 0; i < neighborhoods.length; i++) {
            addMarkerWithTimeout(neighborhoods[i], i * 200);
          }
        }
        var contentString = '<div id="content">'+
              '<div id="siteNotice">'+
              '</div>'+
              '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
              '<div id="bodyContent">'+
              '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
              'sandstone rock formation in the southern part of the '+
              'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
              'south west of the nearest large town, Alice Springs; 450&#160;km '+
              '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
              'features of the Uluru - Kata Tjuta National Park. Uluru is '+
              'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
              'Aboriginal people of the area. It has many springs, waterholes, '+
              'rock caves and ancient paintings. Uluru is listed as a World '+
              'Heritage Site.</p>'+
              '<p>Attribution: Uluru, <a            href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
              'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
              '(last visited June 22, 2009).</p>'+
              '</div>'+
              '</div>';

        function addMarkerWithTimeout(position, timeout) {
          window.setTimeout(function() {
            var data = position;
            var marker = new google.maps.Marker({
              position: position,
              map: map,
              title: data.name,
              animation: google.maps.Animation.DROP
            });
             markers.push(marker);
            var infowindow = new google.maps.infowindowInfo({
                content: contentString,   
            });
            google.maps.event.addListener(marker, function() {
                if (this.getMap()) {
                  infowindow.open(this.getMap(), this);
                } else {
                  infowindow.close()
                }
              });
          }, timeout);
        }


        function clearMarkers() {
          for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(null);
          }
          markers = [];
        }

        google.maps.event.addDomListener(window, 'load', initMap);
        </script>
          </body>
        </html

Answer 1

你只是有两个小错别字。

在您的 script 标签中。在 URL:

中 js 和 signed_in 之间应该有一个 ?

<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initMap">

然后，在您的代码示例的末尾，您的 html 标记缺少结束 >。

如果您解决了这两个问题，您的地图将会加载。

Answer 2

最简单的解决方案，将所需的 HTML 传递给 addMarkersWithTimeout 函数并使用函数闭包（就像在 Google Maps JS API v3 - Simple Multiple Marker Example 的答案中所做的那样）将标记的内容与该标记的点击事件侦听器：

function addMarkerWithTimeout(position, html, timeout) {
  window.setTimeout(function() {
    var data = position;
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: data.name,
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
    var infowindow = new google.maps.InfoWindow({
      content: html,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, html) {
      return function() {
        if (this.getMap()) {
          infowindow.open(this.getMap(), this);
        } else {
          infowindow.close()
        }
      }
    })(marker, html));
  }, timeout);
}

proof of concept fiddle

代码片段：

function addMarkerWithTimeout(position, html, timeout) {
  window.setTimeout(function() {
    var data = position;
    var marker = new google.maps.Marker({
      position: position,
      map: map,
      title: data.name,
      animation: google.maps.Animation.DROP
    });
    markers.push(marker);
    var infowindow = new google.maps.InfoWindow({
      content: html,
    });
    google.maps.event.addListener(marker, 'click', (function(marker, html) {
      return function() {
        if (this.getMap()) {
          infowindow.open(this.getMap(), this);
        } else {
          infowindow.close()
        }
      }
    })(marker, html));
  }, timeout);
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: {
      lat: 52.520,
      lng: 13.410
    }
  });
}


function drop() {
  clearMarkers();
  for (var i = 0; i < neighborhoods.length; i++) {
    if (i == 0) {
      html = contentString
    } else {
      html = "html " + i
    }
    addMarkerWithTimeout(neighborhoods[i], html, i * 200);
  }
}
var contentString = '<div id="content">' +
  '<div id="siteNotice">' +
  '</div>' +
  '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
  '<div id="bodyContent">' +
  '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
  'sandstone rock formation in the southern part of the ' +
  'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) ' +
  'south west of the nearest large town, Alice Springs; 450&#160;km ' +
  '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major ' +
  'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
  'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
  'Aboriginal people of the area. It has many springs, waterholes, ' +
  'rock caves and ancient paintings. Uluru is listed as a World ' +
  'Heritage Site.</p>' +
  '<p>Attribution: Uluru, <a            href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
  'https://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
  '(last visited June 22, 2009).</p>' +
  '</div>' +
  '</div>';


function clearMarkers() {
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}
var neighborhoods = [{
  lat: 52.511,
  lng: 13.447,
  name: "2007"
}, {
  lat: 52.549,
  lng: 13.422,
  name: "2008"
}, {
  lat: 52.497,
  lng: 13.396,
  name: "2009"
}, {
  lat: 52.517,
  lng: 13.394,
  name: "2010"
}];

var markers = [];
var map;
google.maps.event.addDomListener(window, 'load', initMap);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}
#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#floating-panel {
  margin-left: -52px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="floating-panel">
  <button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map"></div>

google 地图 api 动画和多个信息窗口

google maps api animation and multiple infowindows

javascript

google-maps

google-maps-api-3

google-maps-markers

google-maps-api-2