Google Maps 覆盖层
Google Maps - 覆盖层
覆盖层是地图上的对象，它们绑定到经纬度坐标。
Google Maps 有几种类型的覆盖层
- 标记 - 地图上的单个位置。标记还可以显示自定义图标图像
- 折线 - 地图上的一系列直线
- 多边形 - 地图上的一系列直线，并且形状是“封闭的”
- 圆形和矩形
- 信息窗口 - 在地图顶部显示一个弹出气球中的内容
- 自定义覆盖层
Google Maps - 添加标记
Marker 构造函数创建一个标记。请注意，必须设置 position 属性才能显示标记。
使用 setMap() 方法将标记添加到地图
示例
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google Maps - 动画标记
下面的示例演示如何使用 animation 属性为标记添加动画
示例
var marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google Maps - 图标而非标记
下面的示例指定使用图像（图标）而不是默认标记
示例
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google Maps - 折线
Polyline 是在有序序列中的一系列坐标绘制的线。
折线支持以下属性
- path - 为线指定多个经纬度坐标
- strokeColor - 为线指定十六进制颜色（格式：“#FFFFFF”）
- strokeOpacity - 指定线的透明度（0.0 到 1.0 之间的值）
- strokeWeight - 以像素为单位指定线的描边粗细
- editable - 定义线是否可由用户编辑（true/false）
示例
var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});
Google Maps - 多边形
Polygon 类似于 Polyline，因为它由有序序列中的一系列坐标组成。但是，多边形设计用于定义闭环内的区域。
多边形由直线组成，并且形状是“封闭的”（所有直线都连接在一起）。
多边形支持以下属性
- path - 为线指定多个 LatLng 坐标（第一个和最后一个坐标相等）
- strokeColor - 为线指定十六进制颜色（格式：“#FFFFFF”）
- strokeOpacity - 指定线的透明度（0.0 到 1.0 之间的值）
- strokeWeight - 以像素为单位指定线的描边粗细
- fillColor - 为封闭区域内的区域指定十六进制颜色（格式：“#FFFFFF”）
- fillOpacity - 指定填充颜色的透明度（0.0 到 1.0 之间的值）
- editable - 定义线是否可由用户编辑（true/false）
示例
var myTrip = [stavanger,amsterdam,london,stavanger];
var flightPath = new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - 圆形
圆形支持以下属性
- center - 指定圆心的 google.maps.LatLng
- radius - 指定圆的半径（以米为单位）
- strokeColor - 为圆形周围的线指定十六进制颜色（格式：“#FFFFFF”）
- strokeOpacity - 指定描边颜色的透明度（0.0 到 1.0 之间的值）
- strokeWeight - 以像素为单位指定线的描边粗细
- fillColor - 为圆形内的区域指定十六进制颜色（格式：“#FFFFFF”）
- fillOpacity - 指定填充颜色的透明度（0.0 到 1.0 之间的值）
- editable - 定义圆形是否可由用户编辑（true/false）
示例
var myCity = new google.maps.Circle({
center:amsterdam,
radius:20000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
Google Maps - 信息窗口
为标记显示带有某些文本内容的信息窗口
示例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
