谷歌地图叠加层

Google 地图 - 叠加层

叠加层是地图上绑定到纬度/经度坐标的对象。

Google 地图有多种类型的叠加层：

标记 - 地图上的单个位置。标记还可以显示自定义图标图片
折线 - 地图上的一系列直线
多边形 - 地图上的一系列直线，形状为 "closed"
圆形和矩形
信息窗口 - 在地图顶部的弹出气球中显示内容
自定义叠加层

Google 地图 - 添加标记

Marker 构造函数创建一个标记。请注意，必须设置位置属性才能显示标记。

使用 setMap() 方法将标记添加到地图：

示例

var marker = new google.maps.Marker({position: myCenter});

marker.setMap(map);

Google 地图 - 标记动画

下面的示例展示了如何使用动画属性为标记设置动画：

示例

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);

谷歌地图 - 折线

折线是通过按顺序排列的一系列坐标绘制的线。

折线支持以下属性：

路径 - 指定线的几个纬度/经度坐标
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
});

谷歌地图 - 多边形

多边形与折线类似，它由一系列按顺序排列的坐标组成。然而，多边形被设计为定义闭环内的区域。

多边形由直线组成，形状为"closed"（所有线连接起来）。

多边形支持以下属性：

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
});

谷歌地图 - 圆圈

圆支持以下属性：

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
});

谷歌地图 - 信息窗口

显示带有一些标记文本内容的信息窗口：

示例

var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});

infowindow.open(map,marker);

谷歌地图 叠加层