首页 > web前端 > js教程 > 如何使用 JavaScript API v3 在 Google 地图上通过信息窗口轻松绘制多个标记?

如何使用 JavaScript API v3 在 Google 地图上通过信息窗口轻松绘制多个标记?

Mary-Kate Olsen
发布: 2024-12-23 15:48:12
原创
747 人浏览过

How Can I Easily Plot Multiple Markers with Info Windows on a Google Map Using the JavaScript API v3?

简化 Google Maps JS API v3 中的多个标记绘制

使用 Google Maps JavaScript API 时,绘制多个标记通常需要复杂的实现。本文为寻求显示带有随附信息窗口的标记数组的初学者提供了一个简单的解决方案。

问题:
让我们考虑一组具有相应名称、坐标的位置和参考值。目的是为地图上的每个位置放置标记,并在单击标记时显示带有名称的信息窗口。

解决方案:

HTML 和CSS:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?key=YOUR_API_KEY" 
          type="text/javascript"></script>
</head> 
<body>
  <div>
登录后复制

JavaScript:

    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]
    ];
    
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    
    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
      });
      
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>
登录后复制

说明:

  1. 创建地图和显示标记信息的信息窗口。
  2. 迭代通过位置数组并为每个位置创建一个标记对象。
  3. 将标记添加到地图。
  4. 使用事件侦听器将信息窗口与每个标记关联起来,在以下情况下显示位置的名称:点击。

结果:

执行后,代码生成带有多个标记的 Google 地图,表示输入数组中的位置。单击任何标记都会打开一个显示其名称的信息窗口。

闭包注意:

代码利用闭包将标记和位置索引作为参数传递给事件侦听器。如果不熟悉闭包,Mozilla 的开发中心提供了有关该主题的有用指南。

以上是如何使用 JavaScript API v3 在 Google 地图上通过信息窗口轻松绘制多个标记?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板