谷歌地图叠加

标记添加到谷歌地图：

谷歌地图 - 叠加

叠印是必然纬度/经度坐标地图上的对象。

谷歌地图有几种叠加层：

标记 - 地图上的位置单。标记还可以显示自定义图标的图像
折线 - 一个地图上的直线系列
多边形 - 的地图上直线系列，形状是“封闭”
圆和矩形
信息窗口 - 显示在地图上方的弹出气球中的内容
自定义叠加

谷歌地图 - 添加标记

标记构造函数创建一个标记。（注意，位置属性必须设置为标记来显示）。

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

例

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

marker.setMap(map);

试一试»

谷歌地图 - 动画的标记

下面的例子演示了如何用动画动画属性标记：

例

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

marker.setMap(map);

试一试»

谷歌地图 - 图标代替标记

下面的例子指定的图像(icon) ，而不是使用默认的标记：

例

var marker=new google.maps.Marker({
position:myCenter,
icon:'pinkball.png'
});

marker.setMap(map);

试一试»

谷歌地图 - 折线

折线是通过在一系列有序坐标绘制的线。

折线支持以下属性：

路径 - 指定行几个纬度/经度坐标
则strokeColor -指定一个十六进制颜色为线(format: "#FFFFFF")
strokeOpacity，用于 - 指定的行的不透明度（0.0和1.0之间的值）
strokeWeight，用于 - 指定线的笔触以像素为单位重量
编辑-定义线路是否是用户可编辑的(true/false)

例

var myTrip = [stavanger,amsterdam,london];
var flightPath = new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2
});

试一试»

谷歌地图 - 多边形

多边形类似于折线在于，它包括在一个有序序列一系列坐标的。然而，多边形被设计成一个封闭的循环内定义的区域。

多边形是由直线，形状"closed" （所有的线连接起来）。

多边形支持以下属性：

路径 - 指定了几个经纬度坐标线（第一和最后一个坐标是相等的）
则strokeColor -指定一个十六进制颜色为线(format: "#FFFFFF")
strokeOpacity，用于 - 指定的行的不透明度（0.0和1.0之间的值）
strokeWeight，用于 - 指定线的笔触以像素为单位重量
填充颜色-指定封闭区域内该地区十六进制的颜色(format: "#FFFFFF")
fillOpacity - 指定填充颜色的不透明度（0.0和1.0之间的值）
编辑-定义线路是否是用户可编辑的(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.LatLng
半径 - 指定的圆的半径，米
则strokeColor -指定绕了一圈线条的十六进制颜色(format: "#FFFFFF")
strokeOpacity，用于 - 指定笔触颜色的不透明性（0.0和1.0之间的值）
strokeWeight，用于 - 指定线的笔触以像素为单位重量
填充颜色-指定圆内该地区十六进制的颜色(format: "#FFFFFF")
fillOpacity - 指定填充颜色的不透明度（0.0和1.0之间的值）
编辑-定义圆是否是用户可编辑的(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);

试一试»