首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Google Maps JS API v3 -简单的多标记示例

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

Stack Overflow用户
提问于 2010-06-17 13:14:34
回答 9查看 874.9K关注 0票数 704

对Google Maps Api来说还是个新手。我有一个数据数组,我想循环浏览并在地图上绘制。看起来很简单,但我找到的所有多标记教程都很复杂。

让我们使用来自Google站点的数据数组作为示例:

代码语言: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]
];

我只想绘制所有这些点,并在单击以显示名称时弹出一个infoWindow

EN

回答 9

Stack Overflow用户

发布于 2013-03-09 02:30:58

这是使用唯一的titleinfoWindow文本加载多个标记的另一个示例。使用最新的google地图API V3.11进行了测试。

代码语言:javascript
复制
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Multiple Markers Google Maps</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.11&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
        // check DOM Ready
        $(document).ready(function() {
            // execute
            (function() {
                // map options
                var options = {
                    zoom: 5,
                    center: new google.maps.LatLng(39.909736, -98.522109), // centered US
                    mapTypeId: google.maps.MapTypeId.TERRAIN,
                    mapTypeControl: false
                };

                // init map
                var map = new google.maps.Map(document.getElementById('map_canvas'), options);

                // NY and CA sample Lat / Lng
                var southWest = new google.maps.LatLng(40.744656, -74.005966);
                var northEast = new google.maps.LatLng(34.052234, -118.243685);
                var lngSpan = northEast.lng() - southWest.lng();
                var latSpan = northEast.lat() - southWest.lat();

                // set multiple marker
                for (var i = 0; i < 250; i++) {
                    // init markers
                    var marker = new google.maps.Marker({
                        position: new google.maps.LatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()),
                        map: map,
                        title: 'Click Me ' + i
                    });

                    // process multiple info windows
                    (function(marker, i) {
                        // add click event
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow = new google.maps.InfoWindow({
                                content: 'Hello, World!!'
                            });
                            infowindow.open(map, marker);
                        });
                    })(marker, i);
                }
            })();
        });
        </script>
    </head>
    <body>
        <div id="map_canvas" style="width: 800px; height:500px;"></div>
    </body>
</html>

250个标记的屏幕截图:

它将自动对Lat/Lng进行随机化,使其具有唯一性。如果您想测试500、1000、xxx标记和性能,此示例将非常有用。

票数 64
EN

Stack Overflow用户

发布于 2014-01-29 20:02:33

我想我应该把这个放在这里,因为对于那些开始使用Google Maps API的人来说,这似乎是一个流行的着陆点。在客户端渲染多个标记可能是许多地图应用程序性能下降的原因。这很难进行基准测试、修复,在某些情况下甚至很难确定存在问题(由于浏览器实现的差异,客户端可用的硬件,移动设备,等等)。

开始解决这个问题的最简单方法是使用标记聚类解决方案。基本思想是将地理上相似的位置分组到一个具有所显示的点数的组中。当用户放大地图时,这些组会展开以显示下面的单个标记。

也许实现起来最简单的是markerclusterer库。基本实现如下(在库导入之后):

代码语言:javascript
复制
<script type="text/javascript">
  function initialize() {
    var center = new google.maps.LatLng(37.4419, -122.1419);

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      center: center,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < 100; i++) {
      var location = yourData.location[i];
      var latLng = new google.maps.LatLng(location.latitude,
          location.longitude);
      var marker = new google.maps.Marker({
        position: latLng
      });
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer({map, markers});
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

标记被添加到数组中,而不是直接添加到映射中。然后,该数组被传递给库,该库为您处理复杂的计算并附加到map。

这些实现不仅极大地提高了客户端的性能,而且在许多情况下,它们还导致了更简单、更整洁的UI,以及更容易在更大规模上消化数据。

Other implementations可以从谷歌获得。

希望这能帮助一些新手了解映射的细微差别。

票数 41
EN

Stack Overflow用户

发布于 2014-06-06 20:58:16

异步版本:

代码语言:javascript
复制
<script type="text/javascript">
  function initialize() {
    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));
    }
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;
  </script>
票数 22
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3059044

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档