Google Maps Api 多坐标分类标记
- 格式：docx
- 大小：376.45 KB
- 文档页数：2
例子实现：在可视的区域内有1000个坐标，他们会按照一定缩放距离自动分类到一个点内，点击该分类点，显示该类所有的坐标。
前台代码:
<html xmlns="/1999/xhtml">
<head runat="server">
<title></title>
<script src="/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 tLng(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 = t() - t();
// 计算地图从左到右的距离
var lngSpan = northEast.lng() - southWest.lng();
// 创建数据保存Marker对象
var markers = [];
// 创建一个循环
for (var i = 0; i < 1000; i++) {
//创建随机数
var lat = t() + latSpan * Math.random();
var lng = southWest.lng() + lngSpan * Math.random();
var latlng = new tLng(lat, lng);
// 创建Marker，注意它没有添加到地图上面
var marker = new google.maps.Marker({
position: latlng
});
// 将Marker添加到数组中
markers.push(marker);
}
//创建一个MarkerClusterer对象，将marker数组¦对象传递给它
var markerclusterer = new MarkerClusterer(map, markers);
});
};
})();。
