谷歌地图API V3：稳定版与教程

需积分: 9 167 浏览量更新于2024-07-23 收藏 396KB PDF 举报

谷歌地图API v3是Google Maps服务的重要组成部分，它提供了一套JavaScript接口，允许开发者在网页上嵌入和定制交互式地图功能。这个API于2013年2月19日发布了版本3.15，被定义为稳定版，意味着其接口设计在此版本发布后会保持不变，直到被后续版本取代。 **核心组件与功能概述：** 1. **Map**：这是API的基础，用于在页面上创建地图视图。通过`MapOptions`对象设置地图的初始参数，如中心位置、缩放级别、地图类型等。 2. **MapOptions**：包含了地图的初始化配置选项，例如地图的中心经纬度、初始缩放级别、地图类型（如卫星、道路、地形等）等。 3. **MapTypeId**：枚举类型，定义了可用的地图类型选项，如`TERRAIN`, `ROADMAP`, `SATELLITE`, `HYBRID`等。 4. **Controls**：提供了地图上的各种控件，如`MapTypeControl`（切换地图类型）、`OverviewMapControl`（显示大比例尺地图缩略图）、`PanControl`（平移控制）、`RotateControl`（旋转控制）、`ScaleControl`（显示比例尺）、`StreetViewControl`（街景切换）、以及`ZoomControl`（缩放控制）等。每个控件都有相应的`Options`类和样式`ControlStyle`来定制其外观和行为。 5. **ControlPosition**：定义了控件在地图上的放置位置，如`TOP_LEFT`, `TOP_CENTER`, `TOP_RIGHT`, `LEFT_BOTTOM`, `RIGHT_BOTTOM`, `BOTTOM_LEFT`, `BOTTOM_CENTER`, 和 `BOTTOM_RIGHT`。 6. **Overlays**：这些是覆盖物，如标记器（Marker）、多线段（Polyline）、多边形（Polygon）、矩形（Rectangle）和圆（Circle），它们可以用来表示地理位置或添加额外信息。每个覆盖物都有自己的`Options`类，如`MarkerOptions`用于设置标记器的图标、形状和动画效果。 7. **InfoWindow**：用于显示在标记器上方的弹出窗口，提供有关位置的详细信息。`InfoWindowOptions`允许定制显示内容和样式。 8. **API key**：使用Google Maps服务时，开发者需要一个有效的API密钥，如示例中的`AIzaSyC0zUxgeLTlHkW3xXpStzQB-HXTYTeA1HU`，用于识别和限制访问。 9. **Icon, MarkerShape, Symbol, SymbolPath**: 这些用于自定义标记器的图标、形状和路径，提供更大的灵活性。 10. **Animation**: 控制覆盖物的动画效果，如进出动画。谷歌地图API v3为网页开发人员提供了强大的工具，使他们能够轻松地将动态、交互式的地图嵌入到网站中，展示地理位置信息，并实现各种地图操作和定制。学习并熟练掌握这个API对于构建具有地理定位功能的Web应用至关重要。

Properties

Properties Type Description

anchorPoint Point

The offset from the marker's position to the tip of an InfoWindow that has been opened with the marker as anchor.

animation Animation

Which animation to play when marker is added to a map.

clickable boolean

If true, the marker receives mouse and touch events. Default value is true.

crossOnDrag boolean

If false, disables cross that appears beneath the marker when dragging. This option is true by default. This option is

only enabled when

google.maps.visualRefresh is set to true. For backwards compatibility, if raiseOnDrag is set to

false then the default for crossOnDrag changes to false.

cursor string

Mouse cursor to show on hover

draggable boolean

If true, the marker can be dragged. Default value is false.

flat boolean

If true, the marker shadow will not be displayed.

icon string|Icon|Symbol

Icon for the foreground. If a string is provided, it is treated as though it were an Icon with the string as url.

map Map|StreetViewPanorama

Map on which to display Marker.

optimized boolean

Optimization renders many markers as a single static element. Optimized rendering is enabled by default. Disable

optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM

element (advanced usage only).

position LatLng

Marker position. Required.

raiseOnDrag boolean

If false, disables raising and lowering the marker on drag. This option is true by default. This option is disabled when

google.maps.visualRefresh is set to true. Instead, a cross will appear beneath the marker icon while dragging.

Please refer to the

crossOnDrag property for new code. For backwards compatibility, if this is set to false then the

default for

crossOnDrag changes to false.

shadow string|Icon|Symbol

Shadow image. If a string is provided, it is treated as though it were an Icon with the string as url. Shadows are not

rendered when

google.maps.visualRefresh is set to true.

shape MarkerShape

Image map region definition used for drag/click.

title string

Rollover text

visible boolean

If true, the marker is visible

zIndex number

All markers are displayed on the map in order of their zIndex, with higher values displaying in front of markers with

lower values. By default, markers are displayed according to their vertical position on screen, with lower markers

appearing in front of markers further up the screen.

google.maps.Icon object specification

Properties

Properties Type Description

anchor Point

The position at which to anchor an image in correspondance to the location of the marker on the map. By default, the anchor is located

along the center point of the bottom of the image.

origin Point

The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).

scaledSize Size

The size of the entire image after scaling, if any. Use this property to stretch/shrink an image or a sprite.

size Size

The display size of the sprite or image. When using sprites, you must specify the sprite size. If the size is not provided, it will be set

when the image loads.

url string

The URL of the image or sprite sheet.

google.maps.MarkerShape object specification

This object defines the clickable region of a marker image for browsers other than Internet Explorer. The shape consists of two properties — type and coord — which

define the non-transparent region of an image. A

MarkerShape object is not required on Internet Explorer since the browser does not fire events on the transparent

region of an image by default.

Properties

Properties Type Description

coords Array.<number>

The format of this attribute depends on the value of the type and follows the w3 AREA coords specification found at

http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords

The

coords attribute is an array of integers that specify the pixel position of the shape relative to the top-left corner of the target

image. The coordinates depend on the value of

type as follows:

circle: coords is [x1,y1,r] where x1,y2 are the coordinates of the center of the circle, and r is the radius of the circle.

poly: coords is [x1,y1,x2,y2...xn,yn] where each x,y pair contains the coordinates of one vertex of the polygon.

rect: coords is [x1,y1,x2,y2] where x1,y1 are the coordinates of the upper-left corner of the rectangle and x2,y2 are the

coordinates of the lower-right coordinates of the rectangle.

type string

Describes the shape's type and can be circle, poly or rect.

google.maps.Symbol object specification

Properties

Properties Type Description

anchor Point

The position of the symbol relative to the marker or polyline. The coordinates of the symbol's path are translated left and

up by the anchor's x and y coordinates respectively. By default, a symbol is anchored at

(0, 0). The position is

expressed in the same coordinate system as the symbol's path.

fillColor string

The symbol's fill color. All CSS3 colors are supported except for extended named colors. For symbol markers, this

defaults to 'black'. For symbols on polylines, this defaults to the stroke color of the corresponding polyline.

fillOpacity number

The symbol's fill opacity. Defaults to 0.

path SymbolPath|string

The symbol's path, which is a built-in symbol path, or a custom path expressed using SVG path notation. Required.

rotation number

The angle by which to rotate the symbol, expressed clockwise in degrees. Defaults to 0. A symbol in an IconSequence

where fixedRotation is false is rotated relative to the angle of the edge on which it lies.

scale number

The amount by which the symbol is scaled in size. For symbol markers, this defaults to 1; after scaling, the symbol may

be of any size. For symbols on a polyline, this defaults to the stroke weight of the polyline; after scaling, the symbol must

lie inside a square 22 pixels in size centered at the symbol's anchor.

strokeColor string

The symbol's stroke color. All CSS3 colors are supported except for extended named colors. For symbol markers, this

defaults to 'black'. For symbols on a polyline, this defaults to the stroke color of the polyline.

strokeOpacity number

The symbol's stroke opacity. For symbol markers, this defaults to 1. For symbols on a polyline, this defaults to the stroke

opacity of the polyline.

Methods

Value

Description

close() None

Closes this InfoWindow by removing it from the DOM structure.

getContent() string|Node

getPosition() LatLng

getZIndex() number

open(map?:Map

|StreetViewPanorama,

anchor?:MVCObject

)

None

Opens this InfoWindow on the given map. Optionally, an InfoWindow can be associated with an

anchor. In the core API, the only anchor is the Marker class. However, an anchor can be any

MVCObject that exposes a LatLng

position property and optionally a Point anchorPoint property for

calculating the

pixelOffset (see InfoWindowOptions). The anchorPoint is the offset from the

anchor's position to the tip of the InfoWindow.

setContent(content:string|Node) None

setOptions(options:InfoWindowOptions

) None

setPosition(position:LatLng

) None

setZIndex(zIndex:number) None

Events

Events Arguments Description

closeclick None

This event is fired when the close button was clicked.

content_changed None

This event is fired when the content property changes.

domready None

This event is fired when the <div> containing the InfoWindow's content is attached to the DOM. You may wish to monitor this

event if you are building out your info window content dynamically.

position_changed None

This event is fired when the position property changes.

zindex_changed None

This event is fired when the InfoWindow's zIndex changes.

google.maps.InfoWindowOptions object specification

Properties

Properties Type Description

content string|Node

Content to display in the InfoWindow. This can be an HTML element, a plain-text string, or a string containing HTML. The

InfoWindow will be sized according to the content. To set an explicit size for the content, set content to be a HTML element

with that size.

disableAutoPan boolean

Disable auto-pan on open. By default, the info window will pan the map so that it is fully visible when it opens.

maxWidth number

Maximum width of the infowindow, regardless of content's width. This value is only considered if it is set before a call to open.

To change the maximum width when changing content, call close, setOptions, and then open.

pixelOffset Size

The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info

window is anchored. If an InfoWindow is opened with an anchor, the

pixelOffset will be calculated from the anchor's

anchorPoint property.

position LatLng

The LatLng at which to display this InfoWindow. If the InfoWindow is opened with an anchor, the anchor's position will be used

instead.

zIndex number

All InfoWindows are displayed on the map in order of their zIndex, with higher values displaying in front of InfoWindows with

lower values. By default, InfoWindows are displayed according to their latitude, with InfoWindows of lower latitudes appearing

in front of InfoWindows at higher latitudes. InfoWindows are always displayed in front of markers.

google.maps.Polyline class

A polyline is a linear overlay of connected line segments on the map.

This class extends

MVCObject.

Constructor

Constructor Description

Polyline(opts?

:PolylineOptions

)

Create a polyline using the passed PolylineOptions, which specify both the path of the polyline and the stroke style to use when drawing

the polyline. You may pass either an array of

LatLngs or an MVCArray of LatLngs when constructing a polyline, though simple arrays are

converted to

MVCArrays within the polyline upon instantiation.

Methods

Methods Return Value Description

getDraggable() boolean

Returns whether this shape can be dragged by the user.

getEditable() boolean

Returns whether this shape can be edited by the user.

getMap() Map

Returns the map on which this shape is attached.

getPath() MVCArray.<LatLng>

Retrieves the first path.

getVisible() boolean

Returns whether this poly is visible on the map.

setDraggable(draggable:boolean) None

If set to true, the user can drag this shape over the map. The geodesic property

defines the mode of dragging.

setEditable(editable:boolean) None

If set to true, the user can edit this shape by dragging the control points shown at

the vertices and on each segment.

setMap(map:Map) None

Renders this shape on the specified map. If map is set to null, the shape will be

removed.

setOptions(options:PolylineOptions) None

setPath(path:MVCArray

.<LatLng>|Array.<LatLng>) None

Sets the first path. See PolylineOptions for more details.

setVisible(visible:boolean) None

Hides this poly if set to false.

Events

Events Arguments Description

click PolyMouseEvent

This event is fired when the DOM click event is fired on the Polyline.

dblclick PolyMouseEvent

This event is fired when the DOM dblclick event is fired on the Polyline.

drag

MouseEvent

This event is repeatedly fired while the user drags the polyline.

剩余106页未读，继续阅读

流氓豆00

粉丝: 65
资源: 17

谷歌地图API V3：稳定版与教程

googlemap 添加标记 并有气泡效果

谷歌地图APIV3中文文档

hubot-googlemaps:用于hubot的谷歌地图api

google-maps-javascript-v3-api-wrapper

nodejs-google-map-v3

google-maps-api-contextmenu:google.maps.api v3的contextMenu

google-map-v3-infobox

谷歌地图Google Map API V3中文开发文档

js-googlemap-infobox:InfoBox扩展了Google Maps JavaScript API V3 OverlayView类

Google Map V3 API

最新资源

googlemap 添加标记并有气泡效果