谷歌地图API动画和多个信息窗口

Question

I'm trying get map with dropdown markers (every with infowindow). 我正在尝试使用带有下拉标记的地图（每个都带有infowindow）。 Multiple markers must start with HTML/CSS button. 多个标记必须以HTML / CSS按钮开头。 Infowindows should have different text. 信息窗口应使用不同的文本。 I can't build even with the same text in every infowindows. 即使在每个信息窗口中使用相同的文本，我也无法构建。 In console browser I see message: "SCRIPT445: Object doesn't support this action". 在控制台浏览器中，我看到消息：“ SCRIPT445：对象不支持此操作”。 I can't trigger Infowidow at all. 我根本无法触发Infowidow。 My code /used from Google examples/ is below: 我的代码（从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

You just have two minor typos. 您只有两个小错别字。

In your script tag. 在您的script标签中。 There should be a ? 应该有一个? between js and signed_in in the URL: URL中的js和signed_in之间：

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

Then, at the end of your code example, your html tag is missing the closing > . 然后，在代码示例的结尾，您的html标记缺少结束符> 。

If you fix these two issues, your map will load. 如果您解决了这两个问题，地图将会加载。

Answer 2

Simplest solution, pass the desired HTML in to the addMarkersWithTimeout function and use function closure (like is done in the answer to Google Maps JS API v3 - Simple Multiple Marker Example ) to associate the marker's content with the click event listener for that marker: 最简单的解决方案是，将所需的HTML传递到addMarkersWithTimeout函数中，然后使用函数闭包（如在Google Maps JS API v3的答案中进行的操作addMarkersWithTimeout Multiple Marker Example ）将标记的内容与该标记的click事件监听器相关联：

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 概念证明

code snippet: 代码段：

 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"></script> <div id="floating-panel"> <button id="drop" onclick="drop()">Drop Markers</button> </div> <div id="map"></div>

谷歌地图API动画和多个信息窗口

问题描述

2 个解决方案

解决方案1
0 2016-02-08 15:40:00

解决方案2
0 已采纳 2016-02-08 21:12:38

谷歌地图API动画和多个信息窗口

问题描述

2 个解决方案

解决方案1 0 2016-02-08 15:40:00

解决方案2 0 已采纳 2016-02-08 21:12:38

解决方案1
0 2016-02-08 15:40:00

解决方案2
0 已采纳 2016-02-08 21:12:38