Google 地图 API V3 之 叠加层

叠加层概述

Marker

Polyline

OverlayView

添加叠加层

setMap()

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

移除叠加层

setMap()

null

null

setMap()

clearOverlays()

length

0

var map;
var markersArray = [];

function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map =  new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng);
});
}

function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
markersArray.push(marker);
}

// Removes the overlays from the map, but keeps them in the array
function clearOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
}
}

// Shows any overlays currently in the array
function showOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(map);
}
}
}

// Deletes all markers in the array by removing references to them
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}

符号

Symbol

Marker

Polyline

SymbolPath

path

Symbol

Symbol

Symbol

path

anchor

(0,
0)

fillColor

fillOpacity

rotation

scale

strokeColor

strokeOpacity

strokeWeight

scale

var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: "yellow",
fillOpacity: 0.8,
scale: 1,
strokeColor: "gold",
strokeWeight: 14
};

var marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363, 131.044),
icon: goldStar,
map: map
});

预定义路径

名称	说明	示例
google.maps.SymbolPath.CIRCLE	圆形。
google.maps.SymbolPath.BACKWARD_CLOSED_ARROW	各边封闭的向后箭头。
google.maps.SymbolPath.FORWARD_CLOSED_ARROW	各边封闭的向前箭头。
google.maps.SymbolPath.BACKWARD_OPEN_ARROW	一边开放的向后箭头。
google.maps.SymbolPath.FORWARD_OPEN_ARROW	一边开放的向前箭头。

标记

setIcon()

google.maps.Marker

Marker
options

position

LatLng

map

Map

Marker

setMap()

setMap()

null

'click'

draggable

true

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});

Marker

Marker
options

{}

动画

animation

google.maps.Animation

Animation

DROP

animation

null

Marker

BOUNCE

animation

null

Marker

setAnimation()

DROP

BOUNCE

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;

function initialize() {
var mapOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};

map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: parliament
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}

function toggleBounce() {

if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}

setTimeout()

function drop() {
for (var i =0; i < markerArray.length; i++) {
setTimeout(function() {
addMarkerMethod();
}, i * 200);
}
}

自定义标记图片

简单图标

icon

function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var image = 'beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}

复杂图标

icon

shadow

MarkerImage

MarkerImage

size

origin

anchor

anchor

(0,32)

function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33.9, 151.2),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

setMarkers(map, beaches);
}

/**
* Data for the markers consisting of a name, a LatLng and a zIndex for
* the order in which these markers should display on top of each
* other.
*/
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];

function setMarkers(map, locations) {
// Add markers to the map

// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.

// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var image = new google.maps.MarkerImage('images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels tall.
new google.maps.Size(20, 32),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at 0,32.
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}

矢量图标

Symbols

Symbol

icon

marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882, 131.044922),
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 10
},
draggable: true,
map: map
});

折线

Polyline

Polyline

LatLng

折线选项

Polyline

Polyline
options

LatLng

Polyline

Polyline
options

strokeColor

"#FFFFFF"

Polyline

strokeOpacity

0.0

1.0

strokeWeight

editable

function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}

折线数组

LatLng

Polyline

getPath()

MVCArray

getAt()

LatLng

insertAt()

LatLng

removeAt()

LatLng

mvcArray.getAt(i)

mvcArray[i]

path

LatLng

var poly;
var map;

function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);

// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}

/**
* Handles click events on a map, and adds a new point to the Polyline.
* @param {MouseEvent} mouseEvent
*/
function addLatLng(event) {

var path = poly.getPath();

// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);

// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}

折线上的符号

PolylineOptions

icons[]

icons[]

IconSequence

icon

offset

repeat

PolylineOptions

箭头

IconSequence.offset

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};

var line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});

虚线

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
path: 'M 0,-1 0,1',
strokeOpacity: 1,
scale: 4
};

var line = new google.maps.Polyline({
path: lineCoordinates,
strokeOpacity: 0,
icons: [{
icon: lineSymbol,
offset: '0',
repeat: '20px'
}],
map: map
});

自定义路径

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];

var symbolOne = {
path: 'M -2,0 0,-2 2,0 0,2 z',
strokeColor: '#F00',
fillColor: '#F00',
fillOpacity: 1
};

var symbolTwo = {
path: 'M -2,-2 2,2 M 2,-2 -2,2',
strokeColor: '#292',
strokeWeight: 4
};

var symbolThree = {
path: 'M -1,0 A 1,1 0 0 0 -3,0 1,1 0 0 0 -1,0M 1,0 A 1,1 0 0 0 3,0 1,1 0 0 0 1,0M -3,3 Q 0,5 3,3',
strokeColor: '#00F',
rotation: 0
};

var line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: symbolOne,
offset: '0%'
},{
icon: symbolTwo,
offset: '50%'
},{
icon: symbolThree,
offset: '100%'
}
],
map: map
});

为符号添加动画效果

setTimeout()

var line;

function initialize() {
var mapOptions = {
center: new google.maps.LatLng(20.291, 153.027),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

var lineCoordinates = [
new google.maps.LatLng(22.291, 153.027),
new google.maps.LatLng(18.291, 153.027)
];

var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};

line = new google.maps.Polyline({
path: lineCoordinates,
icons: [{
icon: lineSymbol,
offset: '100%'
}],
map: map
});
}

function animateCircle() {
var count = 0;
offsetId = window.setInterval(function() {
count = (count + 1) % 200;

var icons = line.get('icons');
icons[0].offset = (count / 2) + '%';
line.set('icons', icons);
}, 20);
}

多边形

Polyline

Polygon

Polygon

多边形选项

Polygon

paths

MVCArray

LatLng

LatLng

Polygon

Polygon

paths

getPath()

MVCArray

editable

function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
var mapOptions = {
zoom: 5,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var bermudaTriangle;

var 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),
new google.maps.LatLng(25.774252, -80.190262)
];

// Construct the polygon
// Note that we don't specify an array or arrays, but instead just
// a simple array of LatLngs in the paths property
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35
});

bermudaTriangle.setMap(map);
}

多边形自动完成

Polygon

多边形数组

MVCArray

LatLng

Polygon

getPaths()

MVCArray

getAt()

LatLng

insertAt()

LatLng

removeAt()

LatLng

mvcArray.getAt(i)

mvcArray[i]

var map;
var infoWindow;

function initialize() {
var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
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();
}

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

圆形和矩形

Polygon

Circle

Rectangle

圆形

Circle

Polygon

Polygon

Circle

paths

center

google.maps.LatLng

radius

editable

// 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: new google.maps.LatLng(37.09024, -95.712891),
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);
}
}

矩形

Rectangle

Polygon

Polygon

Rectangle

paths

bounds

bounds

google.maps.LatLngBounds

editable

'zoom_changed'

function initialize() {

var coachella = new google.maps.LatLng(33.6803003, -116.173894);
var rectangle;

var mapOptions = {
zoom: 11,
center: coachella,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);

rectangle = new google.maps.Rectangle();

google.maps.event.addListener(map, 'zoom_changed', function() {

// Get the current bounds, which reflect the bounds before the zoom.
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: map.getBounds()
};
rectangle.setOptions(rectOptions);
});
}

用户可修改的形状

editable

true

draggable

true

var circleOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
radius: 25000,
map: map,
editable: true
};
var circle = new google.maps.Circle(circleOptions);

修改事件

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