Google 地图 覆盖层
Google 地图 - 覆盖层
覆盖层是地图上的对象，绑定到经纬度坐标。
Google 地图有几种类型的覆盖层
- 标记 - 地图上的单个位置。标记也可以显示自定义图标图像
- 折线 - 地图上的一系列直线
- 多边形 - 地图上的一系列直线，形状是“封闭”的
- 圆形和矩形
- 信息窗口 - 在地图顶部弹出的气球中显示内容
- 自定义覆盖层
Google 地图 - 添加标记
Marker 构造函数创建了一个标记。请注意，必须设置 position 属性才能显示标记。
使用 setMap() 方法将标记添加到地图
示例
var marker = new google.maps.Marker({position: myCenter});
marker.setMap(map);
Google 地图 - 动画标记
下面的示例展示了如何使用 animation 属性对标记进行动画处理
示例
var marker = new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
Google 地图 - 图标代替标记
下面的示例指定了一个要使用的图像（图标），而不是默认的标记
示例
var marker = new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});
marker.setMap(map);
Google 地图 - 折线
折线是在一系列坐标上按照顺序绘制的线。
折线支持以下属性
- 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 地图 - 多边形
多边形类似于折线，它也由一系列按照顺序排列的坐标组成。但是，多边形旨在定义封闭循环内的区域。
多边形由直线组成，形状是“封闭”的（所有线条都连接起来）。
多边形支持以下属性
- 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 地图 - 圆形
圆形支持以下属性
- 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 地图 - 信息窗口
为标记显示带有文本内容的信息窗口
示例
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
infowindow.open(map,marker);
