Google Maps Api 多坐标分类标记,在地图上显示海量坐标,并分组显示。
2013-01-02 21:45 无抿屎的牛牛 阅读(1330) 评论(0) 编辑 收藏 举报例子实现:在可视的区域内有1000个坐标,他们会按照一定缩放距离自动分类到一个点内,点击该分类点,显示该类所有的坐标。效果如下图:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> <script src="Js/js_4.js" type="text/javascript"></script> <script src="Js/markerclusterer.js" type="text/javascript"></script> </head> <body> <div id="map" style="margin: 5px auto; width: 650px; height: 400px"></div> <div style="text-align: center; font-size: large;"> Random Weather Map </div> </body> </html>
JavaScript文件js_4.js代码,注释比较详细
(function() { window.onload = function() { // 创建地图 var options = { zoom: 12, center: new google.maps.LatLng(22.50, 114.07), mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map'), options); google.maps.event.addListenerOnce(map, 'bounds_changed', function() { // 获取地图分界线 var bounds = map.getBounds(); // 获取地图的角 var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); // 计算地图从上到下的距离 var latSpan = northEast.lat() - southWest.lat(); // 计算地图从左到右的距离 var lngSpan = northEast.lng() - southWest.lng(); // 创建数据保存Marker对象 var markers = []; // 创建一个循环 for (var i = 0; i < 1000; i++) { //创建随机数 var lat = southWest.lat() + latSpan * Math.random(); var lng = southWest.lng() + lngSpan * Math.random(); var latlng = new google.maps.LatLng(lat, lng); // 创建Marker,注意它没有添加到地图上面 var marker = new google.maps.Marker({ position: latlng }); // 将Marker添加到数组中 markers.push(marker); } //创建一个MarkerClusterer对象,将marker数组¦对象传递给它 var markerclusterer = new MarkerClusterer(map, markers); }); }; })();
希望对大家有点帮助,呵呵。