GoogleMap

为什么选择Google

好看

获取API key

访问 https://code.google.com/apis/console/, 使用你的Google账号登陆

搭建Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script>

<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

定义地图属性

1
2
3
4
5
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

  • center(中心点)
  • Zoom(缩放级数
  • MapTypeId(地图的初始类型)
    • google.maps.MapTypeId.HYBRID:显示卫星图像的主要街道透明层
    • google.maps.MapTypeId.ROADMAP:显示普通的街道地图
    • google.maps.MapTypeId.SATELLITE:显示卫星图像
    • google.maps.MapTypeId.TERRAIN:显示带有自然特征(如地形和植被)的地图

地图叠加层

添加标记

1
2
3
4
5
var marker=new google.maps.Marker({
position:myCenter,
});

marker.setMap(map);

可拖动的标记

1
2
3
4
5
6
marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});

marker.setMap(map);

信息窗口

1
2
3
4
5
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

地图事件

点击标记缩放地图

1
2
3
4
5
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});

重置标记

使用 center_changed 事件在3秒后标记移会中心点

1
2
3
4
5
google.maps.event.addListener(map,'center_changed',function() {
window.setTimeout(function() {
map.panTo(marker.getPosition());
},3000);
});

点击标记时打开信息窗口

1
2
3
4
5
6
7
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

设置标记及打开每个标记的信息窗口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});

function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() +
'<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}

地图控件集

  • .Zoom-显示一个滑动条来控制map的Zoom级别
  • .PPan-地图上显示的是一个平底碗样的控件,点击4个角平移地图
  • .MapType-允许用户在map types(roadmap 和 satallite)之间切换
  • .StreetView-显示为一个街景小人图标,可拖拽到地图上某个点来打开街景
  • .Scale-显示地图比例尺
  • .Rotate-显示一个小的圆周图标,可以转动地图
  • .verview Map-从一个广域的视角俯视地图

开启所有控件

1
2
3
4
5
6
7
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true

地图类型

基本地图类型

  • MapTypeId.ROADMAP,用于显示默认的道路地图视图
  • MapTypeId.SATELLITE,用于显示 Google 地球卫星图片
  • MapTypeId.HYBRID,用于同时显示普通视图和卫星视图
  • MapTypeId.TERRAIN,用于根据地形信息显示实际地图。

45° 图像

1
2
3
4
5
var mapProp = {
center:myCenter,
zoom:18,
mapTypeId:google.maps.MapTypeId.HYBRID
};