标记物
介绍
标记可识别地图上的位置。默认情况下，标记使用标准图像。标记可以显示自定义图像，在这种情况下，它们通常称为“图标”。标记和图标是类型的对象 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);
var marker = new google.maps.Marker({
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;
function initMap() {
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 };
var map = new google.maps.Map(document.getElementById('map'), {
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.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
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.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
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在标记选项中将设置 为。
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);
// Place a draggable marker on the map
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:true,
title:"Drag me!"});
进一步的标记定制
有关完全自定义的标记，请参见 自定义的弹出示例。
