例子实现:在可视的区域内有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);
});
};
})();
希望对大家有点帮助,呵呵。
<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>