FROM:https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-CN#BasicShapes
多边形
与 Polyline 对象类似，Polygon 对象也是由一系列有序坐标组成的。不过，多边形不像折线一样有两个端点，而是定义闭合区域。与折线类似的是，您可以定义影响多边形轮廓的笔触；不同的是，您还可以定义多边形内的填充区域。
此外，Polygon 还可以展示复杂形状，其中包括不连续形状（多个多边形定义为一个多边形）、“圆环”（其中的多边形区域在多边形内显示为“岛状”）以及一个或多个多边形的交叉。因此，单个多边形可指定多条路径。
多边形选项
与折线类似，您可以定义多边形边缘（“笔触”）的自定义颜色、粗细和不透明度，以及封闭区域（“填充”）的自定义颜色和不透明度。颜色应以十六进制数字 HTML 样式表示。
由于多边形区域可能包括多条独立的路径，因此 Polygon 对象的 paths 属性可用于指定“一组数组”（其中每个数组都为 MVCArray 类型且分别定义一系列有序的 LatLng 坐标）。
不过，对于仅包含一条路径的简单多边形，为方便起见，您可以使用一组 LatLng 坐标来构造 Polygon。在构造完成并将此简单数组存储到 Polygon 的 paths 属性中后，Google Maps API 会将其转换为“一组数组”。此外，该 API 还提供了简单的 getPath() 方法以构造仅包含一条路径的简单多边形。
注意：如果您是用此方式构造多边形的，那么仍需要将路径处理为 MVCArray，以便检索多边形的相关值。
此外，多边形的 editable 属性用于定义此形状是否在地图上为用户可修改的。
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var infoWindow;
function initialize() {
var myLatLng = new google.maps.LatLng(30.51667,114.31667);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var bermudaTriangle;
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var triangleCoords = [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
];
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(bermudaTriangle, 'click', showArrays);
infoWindow = new google.maps.InfoWindow();
}
/** @this {google.maps.Polygon} */
function showArrays(event) {
// Since this Polygon only has one path, we can call getPath()
// to return the MVCArray of LatLngs
var vertices = this.getPath();
var contentString = '<b>Bermuda Triangle Polygon</b><br>';
contentString += 'Clicked Location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() + '<br>';
// Iterate over the vertices.
for (var i =0; i < vertices.getLength(); i++) {
var xy = vertices.getAt(i);
contentString += '<br>' + 'Coordinate: ' + i + '<br>' + xy.lat() +',' + xy.lng();
}
// Replace our Info Window's content and position
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
圆形和矩形
除了普通的 Polygon 类之外，JavaScript Maps API 还包含一些适用于 Circle 和 Rectangle 的特定类（用于简化其构造）。
圆形
Circle 与 Polygon 类似，您可以自定义圆形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。
与 Polygon 不同，您不应为 Circle 定义 paths；圆形有两个用于定义其形状的其他属性：
center，用于指定圆心的 google.maps.LatLng。
radius，用于指定圆形的半径（以米为单位）。
此外，圆形的 editable 属性用于定义此形状是否在地图上为用户可修改的。
圆形
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var lanLng = new google.maps.LatLng(30.51667,114.31667);
// Create an object containing LatLng, population.
var citymap = {};
citymap['chicago'] = {
center: new google.maps.LatLng(41.878113, -87.629798),
population: 2842518
};
citymap['newyork'] = {
center: new google.maps.LatLng(40.714352, -74.005973),
population: 8143197
};
citymap['losangeles'] = {
center: new google.maps.LatLng(34.052234, -118.243684),
population: 3844829
}
var cityCircle;
function initialize() {
var mapOptions = {
zoom: 4,
center: lanLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
for (var city in citymap) {
// Construct the circle for each value in citymap. We scale population by 20.
var populationOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: citymap[city].center,
radius: citymap[city].population / 20
};
cityCircle = new google.maps.Circle(populationOptions);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
矩形
Rectangle 与 Polygon 类似，您可以自定义矩形边缘（“笔触”）的颜色、粗细和透明度，以及封闭区域（“填充”）的颜色和透明度。颜色应以十六进制数字 HTML 样式表示。
与 Polygon 不同，您不应为 Rectangle 定义 paths；矩形还有一个用于定义其形状的 bounds 属性：
bounds，用于指定矩形的 google.maps.LatLngBounds。
此外，矩形的 editable 属性用于定义此形状是否在地图上为用户可修改的。
以下示例针对任何 'zoom_changed' 事件分别根据前一个视口创建了矩形：
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 11,
center: new google.maps.LatLng(33.678176, -116.242568),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var rectangle = new google.maps.Rectangle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
bounds: new google.maps.LatLngBounds(
new google.maps.LatLng(33.671068, -116.25128),
new google.maps.LatLng(33.685282, -116.233942)
)
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
事件
圆形 radius_changed center_changed
多边形 insert_at remove_at set_at 监听器必须设置在多边形的路径上。如果多边形有多条路径，那么每条路径上都应设置监听器。
折线 insert_at remove_at set_at 监听器必须设置在折线的路径上。
矩形 bounds_changed
google.maps.event.addListener(circle, 'radius_changed', function() {
radius = circle.getRadius();
});
google.maps.event.addListener(outerPath, 'set_at', function() {
print('Vertex moved on outer path.');
});
google.maps.event.addListener(innerPath, 'insert_at', function() {
print('Vertex removed from inner path.');
});
绘图库
默认情况下，系统在加载 Maps JavaScript API 时不会加载该库. 必须使用 libraries 引导程序参数进行明确指定。http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing
DrawingManager 类提供了一个图形界面，以供用户在地图上绘制多边形、矩形、折线、圆形和标记。DrawingManager 对象以如下方式创建：
var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);
DrawingManager 选项
DrawingManager 构造函数采用一组选项，以定义要显示的控件集、控件的位置以及初始绘图状态。
DrawingManager 的 drawingMode 属性用于定义 DrawingManager 的初始绘图状态。该属性接受 google.maps.drawing.OverlayType 常量，且默认为 null（在此情况下启动 DrawingManager 时，光标会处于非绘图模式）。
DrawingManager 的 drawingControl 属性用于定义地图上的绘图工具选择界面的可见性。该属性接受布尔值。
您还可以使用 DrawingManager 的 drawingControlOptions 属性，定义控件的位置以及控件中应表示的叠加层的类型。
position 用于定义绘图控件在地图上的位置，且接受 google.maps.ControlPosition 常量。
drawingModes 是一组 google.maps.drawing.OverlayType 常量，且用于定义绘图控件形状选择器中包含的叠加层类型。系统将始终显示手形图标，以便用户无需绘图即可与地图进行交互。
您可为每种叠加层类型都指定一组默认属性，以便定义首次创建相应叠加层时所采用的外观。这些属性可在叠加层的 {overlay}Options 属性（其中 {overlay} 表示叠加层的类型）中进行定义。例如，圆形的填充属性、笔触属性、zIndex 和可点击性可使用 circleOptions 属性进行定义。如果已传递任何大小、位置或地图值，则系统会忽略这些默认属性。
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
<script>
var lanLng = new google.maps.LatLng(30.51667,114.31667);
function initialize() {
var mapOptions = {
center: lanLng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.MARKER,
google.maps.drawing.OverlayType.CIRCLE,
google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.POLYLINE,
google.maps.drawing.OverlayType.RECTANGLE
]
},
markerOptions: {
icon: 'http://www.googlemapsmarkers.com/v1/A/0099FF/'
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
以下略
更新绘图工具控件
创建 DrawingManager 对象后，可调用 setOptions() 并传递新的值，以进行更新。
drawingManager.setOptions({
drawingControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT,
drawingModes: [google.maps.drawing.OverlayType.MARKER]
}
});
使用以下方法即可隐藏或显示绘图工具控件：
// To hide:
drawingManager.setOptions({
drawingControl: false
});
// To show:
drawingManager.setOptions({
drawingControl: true
});
要从 map 对象删除绘图工具控件，使用以下方法：
drawingManager.setMap(null);
创建形状叠加层后，会触发以下两个事件：
{overlay}complete 事件（其中 {overlay} 代表叠加层类型，例如 circlecomplete、polygoncomplete 等）。对相应叠加层的引用会作为参数进行传递。
overlaycomplete 事件。包含 OverlayType 和对相应叠加层的引用的对象常量会作为参数进行传递。
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
var radius = circle.getRadius();
});
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
var radius = event.overlay.getRadius();
}
});
信息窗口
InfoWindow 用于在地图上方以浮动窗口的形式显示内容。信息窗口有点像漫画书上的文字气泡框，它有一个内容区域和一条锥形引线，引线的头位于地图的指定位置上。点击 Google 地图上的商户标记后，就可以看到活动的信息窗口了。
InfoWindow 构造函数采用 InfoWindow options 对象，以指定一组关于信息窗口的显示方式的初始参数。创建完毕后，所生成的信息窗口不会添加到地图上。要显示该信息窗口，需要对 InfoWindow 调用 open() 方法，并向其传递要在其上打开信息窗口的 Map，以及用于锚定该信息窗口的 Marker（可选）。（如果未提供任何标记，则会在该信息窗口的 position 属性处将其打开。）
InfoWindow options 对象是一个包含以下字段的对象常量：
content，其中包含要在信息窗口打开后显示在其中的文本字符串或 DOM 节点。
pixelOffset，其中包含从信息窗口的尖端到其锚定位置的偏移量。实际上，您无需修改此字段。
position，其中包含此信息窗口锚定位置处的 LatLng。请注意，在标记上打开信息窗口后，系统会自动使用一个新位置更新该值。
maxWidth，用于指定信息窗口的最大宽度（以像素为单位）。默认情况下，信息窗口会根据其内容进行扩展，并且如果是为填充地图而进行扩展的，则其文本会自动换行。如果您实现了 maxWidth，那么信息窗口将会自动换行以强制适应像素宽度。如果屏幕的实际使用面积允许的话，那么信息窗口在达到最大宽度后仍然可以垂直扩展。
InfoWindow 的内容可以是文本字符串、HTML 代码段，也可以就是 DOM 元素。要设置此内容，请在 InfoWindow options 构造函数中传递该内容，或者对信息窗口显式调用 setContent()。要显式调整内容的大小，您可以使用 <div> 进行调整，或者启用滚动功能（如果您希望的话）。请注意，如果您没有启用滚动功能，且内容的大小又超出了信息窗口的可用空间，那么内容可能会从信息窗口中“溢”出。
可以将 InfoWindow 附加到 Marker 对象（在此情况下，信息窗口的位置取决于标记的位置）上，或者地图上所指定的 LatLng 位置。如果您一次只想显示一个信息窗口（正如 Google 地图上的相应行为），只需创建一个信息窗口，然后在地图事件（例如用户点击）完毕后将其重新分配到不同的位置或标记即可。不过与 Google Maps API V2 中的相应行为不同，如果您选择执行以上操作，那么地图可能会立即显示多个 InfoWindow 对象。
要更改某个信息窗口的位置，您可以对该信息窗口调用 setPosition() 以显式更改其位置，或者使用 InfoWindow.open() 方法将其附加到新标记。请注意，如果您在没有传递标记的情况下调用了 open()，那么 InfoWindow 将会使用构建完毕后通过 InfoWindow options 对象所指定的位置。
var infowindow = new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map,marker);
地面叠加层
多边形在表示不规则的区域时很有用，但不能显示图片。要在地图上放置一张图片，请使用 GroundOverlay 对象。 GroundOverlay 的构造函数指定图片的网址和 LatLngBounds 作为参数。图片将在地图上的给定边界内呈现，并与地图的投影一致。
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var newark = new google.maps.LatLng(40.740, -74.18);
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.712216,-74.22655),
new google.maps.LatLng(40.773941,-74.12544));
var mapOptions = {
zoom: 13,
center: newark,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var oldmap = new google.maps.GroundOverlay(
'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds);
oldmap.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
自定义叠加层
创建自定义叠加层的 OverlayView 类。OverlayView 是一个基类，可为您提供在创建叠加层时必须实现的若干方法。该类还提供了一些方法，用于实现屏幕坐标和地图位置之间的转换。
要创建自定义叠加层，请执行以下操作：
将自定义对象的 prototype 设置为 google.maps.OverlayView() 的新实例。这可以有效地实现叠加层类的“子类化”。
为自定义叠加层创建构造函数，并将该构造函数中的所有初始化参数都设置为自定义属性。
在原型中实现 onAdd() 方法，以将叠加层附加到地图。在地图准备好附加叠加层后，系统将会调用 OverlayView.onAdd()。
在原型中实现 draw() 方法，以处理对象的视觉显示。同样，在对象首次显示后，系统将会调用 OverlayView.draw()。
您还应实现 onRemove() 方法，以清理叠加层中添加的所有元素。
初始化叠加层
当叠加层完成首次示例化并处于准备显示状态时，我们需要通过浏览器的 DOM 将其附加到地图。API 会显示相关信息以表明：系统已通过调用叠加层的 onAdd() 方法将其添加到地图。在处理此方法时，我们会创建一个用于存储图片的 <div>，然后添加一个 <img> 元素并将其附加到 <div>，最后将叠加层附加到地图的一个“窗格”（即 DOM 树中的节点）。
一组 MapPanes 类型的窗格用于指定不同的层在地图上的堆叠顺序。您可以使用以下窗格，并按以下枚举顺序（由下至上，第一个窗格在最下面）堆叠这些窗格：
MapPanes.mapPane
MapPanes.overlayLayer
MapPanes.overlayShadow
MapPanes.overlayImage
MapPanes.floatShadow
MapPanes.overlayMouseTarget
MapPanes.floatPane
绘制叠加层
实现此 draw() 方法，然后使用 getProjection() 检索叠加层的 MapCanvasProjection，并计算对象的右上角和左下角锚定点的准确坐标，从而重新调整 <div> 的大小
删除叠加层
还会添加 onRemove() 方法，以便从地图彻底删除叠加层。如果之前将叠加层的 map 属性设为了 null，那么系统将会自动通过 API 调用此方法。
隐藏和显示叠加层
隐藏或显示（而不只是创建或删除）叠加层，您可实现自己的 hide() 和 show() 方法，以调整叠加层的可见性。
相关推荐
Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧
GoogleMap中文教程，包含V3版本中文API，不过是通过翻译出来的，不过作为平时上不了网的脱机资源还是可以看看的。
google map v3开发 V3地图搜素，V3地图标注，V3地图多点标注
Google Map v3 官方实例 .手工整理的.
google map v3 demo 数据库动态案例 php的
google map v3 讲述叠加层 内附代码讲解 为了让用户能尽快使用第三版API，Google已经在实验室中将其基本的功能发布，点这里可以查看文档，当然全部功能并没有完全开发好，用户可以对其提供一些使用上的反馈，用户...
google map v3离线地图资源包，原博文链接源码
googleMap的中文API,V3版本的,希望对于还在使用googleMap离线地图的你有所帮助
Google Map API V3 离线开发文档（与Google官网一模一样，经编辑后离线也能照样查看，速度提升一个等级） PS:文件不能重命名，而原因想必你懂的！
谷歌升级后的地图demo，不包含密钥的开发。仅供借鉴
一个集成google map api v3版本的wpf程序，点击地图自动添加标记
谷歌MAP_V3中文详解以及一个简单例子
根据经纬度转换成详细地址。由于google map v2 已申请不了key 了， 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。
Google Map api V3 (3.9.12)的离线开发包
写了很多关于googlemap js v3的示例,仅供参考
谷歌地图google map api v3 ExtDraggableObject可拖拽对象类
按照Google Maps官方文档页面的说明初始化Google Map，然后使用CustomOverlay函数显示自定义叠加层。 选项 latlng-自定义叠加层的纬度和经度 map- Google Map对象 内容-覆盖内容 verticalOffset-叠加层的垂直偏移 ...
谷歌地图Google Map API中文开发文档 V3
Google mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle mapGoogle map
Google Map API最新版本(V3)代码示例源码和教程，包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见：...