您的位置：首页 > Web前端 > JavaScript

JavaScript 谷歌地图demo

2017-11-26 21:59 92 查看
可以实现显示多个点的大头针, 点击显示/切换信息框, 自适应显示地图大小;

官方给的接口地址, 在大陆是不用指望的, 换成了ditu.google.cn; 这里坐标数据写死了, 取数据库数据测试, 有效;

参考官方文档样例写的小demo, 还要继续探索研究啊 : ) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#map {
height: 800px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script src="http://ditu.google.cn/maps/api/js?&key=你的key"></script>
<script type="text/javascript" src="./jquery-1.8.2.min.js"></script>
<script>
//1.获取所有点的坐标
//2.根据坐标确定地图边界,适应边界生成地图
//3.在地图显示坐标大头针marker
//4.生成infowindow,绑定点击显示详细信息事件

//保存坐标数组
var poi_arr = new Array();
poi_arr[0] = {lat: 39.010695, lng: 88.151546 };
poi_arr[1] = {lat: 39.008236, lng: 88.145581 };
poi_arr[2] = {lat: 39.014379, lng: 88.137911 };

var marker = [],
infowindows = [],
brief_info = [],
contentString = [],
param_lat = [],
param_lng = [];

function initMap() {

//多边形中心点
var bounds2 = new google.maps.LatLngBounds();
var polygonCoords = [];

//遍历坐标确定中心和边界
for(var i=0;i<poi_arr.length;i++){
param_lat.push(poi_arr[i].lat);
param_lng.push(poi_arr[i].lng);

polygonCoords[i] = new google.maps.LatLng(poi_arr[i].lat, poi_arr[i].lng);
}

for (k = 0; k < polygonCoords.length; k++) {
bounds2.extend(polygonCoords[k]);
}
//获得中心点坐标
var map_center = bounds2.getCenter();

//生成地图
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: map_center,
mapTypeId: 'satellite'
});

var bounds = {
north: Math.max.apply(Math, param_lat),
south: Math.min.apply(Math, param_lat),
east: Math.max.apply(Math, param_lng),
west: Math.min.apply(Math, param_lng),
};

// 适应边界显示地图
map.fitBounds(bounds);

//详细信息
var cont_full = '<div id="content">'+
'<p>姓名: 小王</p>'+
'<p>坐标: 52.511467, 13.447179</p>'+
'<p>登录时间: 2017-11-15</p>'+
'<p>状态: 巡检中</p>'+
'<p>任务: 11区供电站巡检</p>'+
'</div>';

//遍历坐标,生成大头针,生成信息
for(var i=0;i<poi_arr.length;++i){
//生成信息框内容
contentString[i] = '<div id="content">'+
'<p>姓名: 小王'+ i +'</p>'+
'</div>';

//生成大头针
marker[i] = new google.maps.Marker({
position: poi_arr[i],
map: map
});

brief_info[i] = new google.maps.InfoWindow({
content: contentString[i],
maxWidth: 200
});

infowindows[i] = new google.maps.InfoWindow({
content: cont_full,
maxWidth: 200
});

//显示姓名信息框
brief_info[i].open(map, marker[i]);

bind_click(i,marker[i]);

}
}

function bind_click(i,ma){
//遍历所有坐标,绑定点击事件
ma.addListener('click', function() {
brief_info[i].close();
infowindows[i].open(map, ma);
});
}

var start = new google.maps.event.addDomListener(window, 'load', initMap);

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 谷歌地图 google api
相关文章推荐
新的分享
章节导航