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() 方法，以调整叠加层的可见性。
相关推荐
3. **地面覆盖**：使用`google.maps.GroundOverlay`添加图像覆盖层，常用于卫星图像或地形图的叠加。 **五、图层与服务** 1. **交通图层**：通过`map.overlayMapTypes.push()`添加交通流量图层。 2. **地形图层**：...
谷歌地图 Google Map API V3 中文开发文档提供了一个详细的中文开发指南，涵盖了谷歌地图 Google Map API V3 的使用方法、相关类库、事件处理等方面的知识点。开发者可以根据自己的需求，选择合适的组件和方法来创建...
总的来说，Google Maps API V3 提供了丰富的叠加层功能，使得开发者可以构建功能强大且互动性强的网络地图应用。通过熟练掌握叠加层的使用，你可以创建出具有个性化地图元素和丰富交互性的地图项目，为用户提供独特...
Google Map V3 开放手册 开放文档 里面包含了 Map类 方法 属性 是咧
由于这个压缩包名为"WebMap"，里面可能包含了一个简单的web应用，展示如何使用谷歌地图API V3来创建一个网页地图。开发者可以通过分析和学习这个源码，了解上述知识点的实际应用，并进一步扩展自己的地图应用开发...
这个“google map v3离线地图资源包”显然提供了一种方法，使得用户能够在没有互联网连接的情况下使用Google Maps的功能，这对于那些在偏远地区或网络不稳定环境下的应用尤其有价值。下面将详细讨论与这个资源包相关...
**Google Map V3 API**是谷歌提供的一种用于在网页中集成地图功能的接口，它允许开发者利用JavaScript语言创建交互式的地图应用。这个API是Google Maps API的第三个主要版本，提供了更多的功能、更好的性能以及更...
在IT行业中，Google Maps API v3 是一个广泛使用的工具，用于在网页上集成地图功能。...通过学习和实践这些实例，开发者可以更好地理解和掌握Google Maps API v3的用法，从而实现各种复杂而富有创意的地图功能。
**WPF Google Map V3 示例详解** 在Windows Presentation Foundation（WPF）开发中，集成Google Maps API可以帮助我们创建丰富的地理信息系统应用。本示例重点介绍了如何在WPF项目中使用Google Maps API V3，实现...
**GoogleMap V3 样式详解** 在Web开发中，Google Maps API V3是一个强大的工具，它允许开发者在网页上嵌入交互式的地图，并进行高度自定义。本篇将深入探讨如何利用Google Maps API V3来创建和管理地图的样式，以...
根据经纬度转换成详细地址。由于google map v2 已申请不了key 了， 更换成v3, 代码也需要更换成v3代码。2013-10-30上传。
在“Google_Maps_JavaScript_API_V3中文手册.pdf”中，你可以找到关于如何使用谷歌地图API V3的详细指南。以下是一些关键知识点的概述： 1. **初始化地图**： - `google.maps.Map`对象是地图的核心，你需要创建一...
在本文中，我们将深入探讨Google Maps API的第三版（V3），主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库，用于在网页上嵌入交互式地图，进行地理位置...
在IT行业中，Google Maps JavaScript API V3（简称jsv3）是开发人员广泛使用的工具，用于集成地图功能到Web应用程序中。这个API提供了丰富的功能，包括地图显示、标记定位、路径绘制、地理编码、信息窗口等。下面...
Google Map API V3（3.9.12）是谷歌提供的一个用于在网页上嵌入交互式地图的服务，它是Google Maps JavaScript API的第三个主要版本。这个离线开发包允许开发者在没有网络连接的情况下进行地图应用的开发和测试，这...
按照Google Maps官方文档页面的说明初始化Google Map，然后使用CustomOverlay函数显示自定义叠加层。 选项 latlng-自定义叠加层的纬度和经度 map- Google Map对象 内容-覆盖内容 verticalOffset-叠加层的垂直偏移 ...
Google Map API最新版本(V3)代码示例源码和教程，包括了添加地图、在地图上添加和自定义marker的内容、添加曲线和曲线的点击事件等最常用功能。详细教程请见：...
谷歌地图API V3是一个强大的工具，用于在网页上集成交互式地图功能。在这个案例中，我们将探讨如何使用PHP和MySQL数据库与谷歌地图V3 API进行动态交互，实现用户点击地图后添加标记，并将这些标记信息存储到数据库中...
通过这个"google Map api v3学习例子"，你可以逐步掌握如何利用Google Maps API V3构建交互式地图应用，包括添加标记、处理事件、展示叠加层等功能。实践中不断探索，你会发现Google Maps API V3的强大和灵活性，能...
在IT行业中，GoogleMap是一个广泛使用的地图服务，它提供了丰富的API接口，允许开发者在其应用程序中集成地图功能。本文将深入探讨GoogleMap谷歌地图API的使用，以及如何通过它实现一个全面的地图工具。 首先，让...