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!"           

進一步的标記定制

有關完全自定義的标記，請參見 自定義的彈出示例。