Google地图官方API-在地图上绘图（标记物）

标记物

介绍

标记可识别地图上的位置。默认情况下，标记使用标准图像。标记可以显示自定义图像，在这种情况下，它们通常称为“图标”。标记和图标是类型的对象 Marker。您可以在标记的构造函数中设置自定义图标，也可以调用setIcon()标记。请参阅下面有关自定义标记图像的更多信息。

从广义上讲，标记是一种叠加。有关其他类型的叠加层的信息，请参见 在地图上绘制。

标记被设计为交互式的。例如，默认情况下，它们接收 'click'事件，因此您可以添加事件侦听器以打开 显示自定义信息的 信息窗口。通过将标记的draggable属性设置为，可以允许用户在地图上移动标记true。有关可拖动标记的更多信息，请参见 下文。

添加标记

所述google.maps.Marker构造函数采用一个单一的 Marker options对象文本，指定标记的初始性能。

在构造标记时，以下字段特别重要并且通常设置：

position（必需）指定LatLng标识标记的初始位置。检索a的一种方法LatLng是使用地理编码服务。

map（可选）指定Map放置标记的位置。如果未在标记的构造上指定地图，则会创建标记，但不会将其附加到（或显示在）地图上。您可以稍后通过调用标记的setMap()方法来添加标记。

以下示例向澳大利亚中部乌鲁鲁的地图添加了一个简单的标记：

function initMap() {

var myLatLng = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 4,
center: myLatLng           

});

var marker = new google.maps.Marker({

position: myLatLng,
map: map,
title: 'Hello World!'           

}

在上面的示例中，使用map标记选项中的属性，在标记构造时将标记放置在地图上。另外，您可以使用标记的setMap()方法将标记直接添加到地图，如以下示例所示：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var mapOptions = {

zoom: 4,

center: myLatlng

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

position: myLatlng,
title:"Hello World!"           

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

marker.setMap(map);

标记的title将显示为工具提示。

如果您不希望Marker options在标记的构造函数中传递任何{}参数，请在构造函数的最后一个参数中传递一个空对象。

查看示例。

删除标记

要从地图上删除标记，请调用作为参数setMap()传递的方法null。

marker.setMap(null);

请注意，上述方法不会删除标记。它只是从地图上删除标记。相反，如果您希望删除标记，则应将其从地图上删除，然后将标记本身设置为null。

如果要管理一组标记，则应创建一个数组来保存标记。使用此数组，然后可以setMap()在需要删除标记时依次调用 数组中的每个标记。您可以删除标记，方法是将它们从地图中删除，然后将数组的设置length为0，从而删除所有对标记的引用。

动画标记

您可以为标记设置动画，以使它们在各种不同的情况下都可以动态显示。要指定标记动画的方式，请使用标记animation属性，类型为 google.maps.Animation。Animation 支持以下值：

DROP表示标记在首次放置在地图上时应从地图顶部下降到其最终位置。一旦标记停止，动画将停止，并animation恢复为null。通常在创建时指定这种动画类型 Marker。

BOUNCE表示标记应反弹到位。弹跳标记将继续弹跳，直到其animation属性显式设置为 为止null。

您可以通过调用启动以对现有标记的动画 setAnimation()在上Marker对象。

// The following example creates a marker in Stockholm, Sweden using a DROP

// animation. Clicking on the marker will toggle the animation between a BOUNCE

// animation and no animation.

var marker;

var map = new google.maps.Map(document.getElementById('map'), {

zoom: 13,
center: {lat: 59.325, lng: 18.070}           

marker = new google.maps.Marker({

map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 59.327, lng: 18.067}           

marker.addListener('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);           

自定义标记图像

如果要在标记上显示字母或数字，则可以使用标记标签。如果需要更大的自定义，则可以定义一个图标来显示，而不是默认的标记图像。定义图标涉及设置许多确定标记的视觉行为的属性。

以下各节描述了标记标签，简单图标，复杂图标和符号（矢量图标）。

标记标签

标记标签是出现在标记内的字母或数字。本部分中的标记图像显示标记标签，上面带有字母“ B”。您可以将标记标签指定为字符串或 MarkerLabel 包含字符串和其他标签属性的对象。

创建标记时，可以label在MarkerOptions 对象中指定属性 。另外，您也可以拨打setLabel()上 标记 物设置在标签上已有标记。

以下示例在用户单击地图时显示带标签的标记：

// In the following example, markers appear when the user clicks on the map.

// Each marker is labeled with a single alphabetical character.

var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

var labelIndex = 0;

function initialize() {

var bangalore = { lat: 12.97, lng: 77.59 };

zoom: 12,
center: bangalore           

// This event listener calls addMarker() when the map is clicked.

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

addMarker(event.latLng, map);           

// Add a marker at the center of the map.

addMarker(bangalore, map);

// Adds a marker to the map.

function addMarker(location, map) {

// Add the marker at the clicked location, and add the next-available label

// from the array of alphabetical characters.

var marker = new google.maps.Marker({

position: location,
label: labels[labelIndex++ % labels.length],
map: map           

google.maps.event.addDomListener(window, 'load', initialize);

简单的图标

在最基本的情况下，图标可以简单地指示要使用的图像，而不是默认的Google Maps图钉图标。要指定这样的图标，请将标记的icon属性设置为图像的URL。Maps JavaScript API将自动调整图标的大小。

// This example adds a marker to indicate the position of Bondi Beach in Sydney,

// Australia.

zoom: 4,
center: {lat: -33, lng: 151}           

var image = '

https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png

';

var beachMarker = new google.maps.Marker({

position: {lat: -33.890, lng: 151.274},
map: map,
icon: image           

复杂的图标

您可能需要指定复杂的形状以指示可单击的区域，并指定图标相对于其他叠加层的显示方式（它们的“堆叠顺序”）。以这种方式指定的图标应将其icon属性设置为类型的对象 Icon。

Icon 对象定义图像。它们还定义了size图标的图标，origin图标的图标（例如，如果您想要的图像是sprite中较大图像的一部分）以及anchor图标的热点应位于的位置（基于原点）。

如果您使用的是标签与自定义标记，您可以使用定位标签labelOrigin的属性 Icon 对象。

注意：标记阴影已在Maps JavaScript API的3.14版中删除。以编程方式指定的任何阴影都将被忽略。

// The following example creates complex markers to indicate beaches near

// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond

// to the base of the flagpole.

zoom: 10,
center: {lat: -33.9, lng: 151.2}           

setMarkers(map);

// 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) {

// Adds 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 = {

url: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
// This marker is 20 pixels wide by 32 pixels high.
size: new google.maps.Size(20, 32),
// The origin for this image is (0, 0).
origin: new google.maps.Point(0, 0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor: new google.maps.Point(0, 32)           

};

// Shapes define the clickable region of the icon. The type defines an HTML

// 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 = {

coords: [1, 1, 1, 20, 18, 20, 18, 1],
type: 'poly'           

for (var i = 0; i < beaches.length; i++) {

var beach = beaches[i];
var marker = new google.maps.Marker({
  position: {lat: beach[1], lng: beach[2]},
  map: map,
  icon: image,
  shape: shape,
  title: beach[0],
  zIndex: beach[3]
});           

将MarkerImage对象转换为类型Icon

在Maps JavaScript API版本3.10之前，复杂的图标被定义为MarkerImage对象。在Icon3.10版本中添加对象文本，并取代MarkerImage从3.11版本开始。Icon对象常量支持相同的参数MarkerImage，让您轻松转换 MarkerImage到Icon通过去除构造，在包装之前的参数{}的，并添加每个参数的名称。例如：

var image = new google.maps.MarkerImage(

place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
           

变成

var image = {

url: place.icon,

size: new google.maps.Size(71, 71),

origin: new google.maps.Point(0, 0),

anchor: new google.maps.Point(17, 34),

scaledSize: new google.maps.Size(25, 25)

符号

除栅格图像外，标记还支持显示称为的矢量路径Symbols。要显示矢量路径，Symbol请将带有所需路径的对象文字传递到标记的icon属性。您可以使用google.maps.SymbolPath中的预定义路径之一，也可以使用 SVG路径符号 定义自定义路径 。

有关更多信息，请参见 符号文档。

使标记可拖动

要允许用户将标记拖动到地图上的其他位置，draggable请true在标记选项中将设置 为。

// Place a draggable marker on the map

position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"           

进一步的标记定制

有关完全自定义的标记，请参见 自定义的弹出示例。