Google地图接口API之地图叠加层(三)
叠加层是地图上绑定到经度/纬度坐标的对象，会随您拖动或缩放地图而移动。
Google 地图 API 有如下几种叠加层：
(1). 标记:地图上的点使用标记来显示，通常显示自定义图标。标记是 GMarker 类型的对象，并且可以利用 GIcon 类型的对象来自定义图标。
(2). 折线:地图上的线使用折线（表示点的集合）来显示。线是类型为 GPolyline 的对象。
(3). 多边形:地图上的区域显示为多边形（如果是任意形状的区域）或底面叠加层（如果是矩形区域）。多边形类似于闭合的折线，因此可以是任何形状。地面叠加层通常用于地图上与图块有直接或间接关联的区域。
(4). 图块:地图本身使用图块叠加层显示。如果您有自己的系列图块，可以使用 GTileLayerOverlay 类来改变地图上已有的图块，甚至可以使用 GMapType 来创建您自己的地图类型。
(5). 信息窗口:信息窗口也是一种特殊的叠加层。但是请注意，信息窗口会自动添加到地图中，并且地图只能添加一个类型为 GInfoWindow 的对象。
1. Google 地图 - 标记
标记标识地图上的点。默认情况下，它们使用 G_DEFAULT_ICON（您也可以指定自定义图标）。GMarker 构造函数将 GLatLng 和 GMarkerOptions（可选）对象作为参数。
标记设计为可交互。例如，默认情况下它们接收 "click" 事件，常用于在事件侦听器中打开信息窗口。
通过 setMap() 方法在地图上添加标记，如下实例所示:
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var myCenter=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var marker=new google.maps.Marker({ position:myCenter, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
效果如下所示：
可拖动的标记：使用 animation 属性来拖动标记:
marker=new google.maps.Marker({ position:myCenter, animation:google.maps.Animation.BOUNCE }); marker.setMap(map);
自定义显示图标：标记可以用自定义的新图标来显示，以替代默认图标:
var marker=new google.maps.Marker({ position:myCenter, icon:'pinkball.png' }); marker.setMap(map);
2. Google 地图 - 折线
GPolyline 对象可在地图上创建线性叠加层。GPolyline 包括一系列点，并创建一系列有序连接这些点的线段。
折线支持以下属性：
- path - 指定了多个直线的纬度/经度坐标
- strokeColor - 指定直线的十六进制颜色值(格式: "#FFFFFF")
- strokeOpacity - 指定直线的透明度(该值为 0.0 到 1.0)
- strokeWeight - 定义线的宽度,以像素为单位。
- editable - 定义用户是否可编辑直线(true/false)
代码如下所示：
<html> <head> <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"> </script> <script> var x=new google.maps.LatLng(52.395715,4.888916); var stavanger=new google.maps.LatLng(58.983991,5.734863); var amsterdam=new google.maps.LatLng(52.395715,4.888916); var london=new google.maps.LatLng(51.508742,-0.120850); function initialize() { var mapProp = { center:x, zoom:4, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); var myTrip=[stavanger,amsterdam,london]; var flightPath=new google.maps.Polyline({ path:myTrip, strokeColor:"#0000FF", strokeOpacity:0.8, strokeWeight:2 }); flightPath.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>
效果如下所示：