IDataAPI Google Maps JS API v3 - 简单的多标记示例 返回

Google Maps JS API v3 - 简单的多标记示例


biu~
2025-03-31 05:22:49 (8天前) 
  1.             相当新的谷歌地图


API
</跨度>
。我有一个阵列

数据
</跨度>
我想循环并在地图上绘图。看起来相当简单，但我发现的所有多标记教程都非常复杂 。

我们来用吧

数据
</跨度>
谷歌网站上的数组为例：

var locations = [
[‘邦迪海滩’， - 33.890542,151.274856,4]，
[‘Coogee Beach’， - 33.923036,151.259052,5]，
[‘克罗纳拉海滩

5 条回复
  1. 0# Coolkid | 2019-08-31 10-32


    这是最简单的我可以减少它：



    1.     
            <!DOCTYPE html>


        
        <span class="pln">Google Maps Multiple Markers</span>
        


        
    3.   


    28. </code>
    29.


    截图：






    将回调参数传递给时，会发生一些关闭魔法

    addListener

    方法。如果您不熟悉闭包的工作方式，这可能是一个非常棘手的主题。如果是这样的话，我建议您查看以下Mozilla文章以获得简要介绍：



  2. 1# 张三岁 | 2019-08-31 10-32



    来自

    Daniel Vassallo的回答

    ，这是一个以更简单的方式处理闭包问题的版本。



    因为所有标记都有个体

    信息窗口

    并且由于JavaScript不关心您是否向对象添加额外属性，因此您只需添加一个

    信息窗口

    到了

    标记的

    属性然后调用

    .open()

    在…上

    信息窗口

    从它自己！



    的
    编辑：
    </强>
    有足够的数据，页面加载可能会花费很多时间，所以而不是构建

    信息窗口

    使用标记，施工应仅在需要时进行。注意用于构造的任何数据

    信息窗口

    必须附加到

    标记

    作为财产（

    data

    ）。另请注意，在第一次单击事件后，

    infoWindow

    将作为其标记的属性保留，因此浏览器不需要不断重建。



    1.     
            var locations = [
        [‘Bondi Beach’, -33.890542, 151.274856, 4],
        [‘Coogee Beach’, -33.923036, 151.259052, 5],
        [‘Cronulla Beach’, -34.028249, 151.157507, 3],
        [‘Manly Beach’, -33.80010128657071, 151.28747820854187, 2],
        [‘Maroubra Beach’, -33.950198, 151.259302, 1]
      ];
    2. var map = new google.maps.Map(document.getElementById(‘map’), {
        center: new google.maps.LatLng(-33.92, 151.25)
      });
    3. for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          data: {
            name: locations[i][0]
          }
        });
        marker.addListener(‘click’, function() {
          if(!this.infoWindow) {
            this.infoWindow = new google.maps.InfoWindow({
              content: this.data.name;
            });
          }
          this.infoWindow.open(map,this);
        })
      }
    4. </code>
    5.

  3. 2# afs-loliaholic | 2019-08-31 10-32



    异步版本：



    1.     
            
    28. </code>
    29.

  4. 3# v-star*위위 | 2019-08-31 10-32


    的
    资源

    链接

    </强>



    的
    演示

    链接

    </强>



    的
    完整的HTML代码
    </强>




    • 在Click或Hover上显示InfoWindow。


    • 只显示一个InfoWindow








    1.     
                <!DOCTYPE html>
          

          
              
              
          

          
              
      My Google Maps Demo

              
              
    3.     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    5. </body>
    7. </html>
    9. </code>
    10.

登录 后才能参与评论