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

Posted

技术标签:

【中文标题】谷歌地图 api 动画和多个信息窗口【英文标题】:google maps api animation and multiple infowindows 【发布时间】:2016-05-18 06:29:55 【问题描述】:

我正在尝试获取带有下拉标记的地图(每个都带有 infowindow)。 多个标记必须以 html/CSS 按钮开头。 Infowindows 应该有不同的文本。 即使在每个信息窗口中使用相同的文本,我也无法构建。在控制台浏览器中,我看到消息:“SCRIPT445:对象不支持此操作”。我根本无法触发 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

【问题讨论】:

首先,您的代码 Uncaught TypeError: google.maps.infowindowInfo is not a function 出现 javascript 错误。 Javascript 区分大小写,应该是google.maps.InfoWindow Google Maps JS API v3 - Simple Multiple Marker Example的可能重复 ***.com/questions/11425475/… 看这里 【参考方案1】:

最简单的解决方案,将所需的 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

代码 sn-p:

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>

【讨论】:

【参考方案2】:

你只有两个小错别字。

在您的script 标签中。 URL 中的jssigned_in 之间应该有一个?

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

然后,在您的代码示例末尾,您的 html 标记缺少结束 &gt;

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

【讨论】:

感谢您的帮助和 cmets。地图正在加载,但信息窗口仍然无法使用。

以上是关于谷歌地图 api 动画和多个信息窗口的主要内容,如果未能解决你的问题,请参考以下文章

如何在谷歌地图上显示多个信息窗口?

谷歌地图 Android API v2 - 折线上的信息窗口?

多个谷歌地图圈的信息窗口

如何动态添加谷歌地图信息窗口?

鼠标悬停时的谷歌地图 v3 标记信息窗口

当你从谷歌地图API中点击地图中的内置位置(不是标记)时,如何自定义弹窗的内容?