Giới thiệu
Điểm đánh dấu xác định một vị trí trên bản đồ. Theo mặc định, điểm đánh dấu sẽ sử dụng
hình ảnh chuẩn. Điểm đánh dấu có thể hiển thị hình ảnh tuỳ chỉnh, trong trường hợp đó
thường được gọi là "biểu tượng". Điểm đánh dấu và biểu tượng là các đối tượng thuộc loại
Marker
. Bạn có thể đặt biểu tượng tuỳ chỉnh trong hàm dựng của điểm đánh dấu, hoặc bằng cách
đang gọi setIcon()
trên điểm đánh dấu. Xem thêm về
tuỳ chỉnh hình ảnh điểm đánh dấu.
Nói chung, điểm đánh dấu là một loại lớp phủ. Để biết thông tin về các loại lớp phủ, xem Vẽ trên bản đồ.
Điểm đánh dấu được thiết kế có tính tương tác. Ví dụ: theo mặc định, chúng
nhận các sự kiện 'click'
, vì vậy, bạn có thể thêm trình nghe sự kiện vào
hiện một
cửa sổ thông tin
hiển thị thông tin tuỳ chỉnh. Bạn có thể cho phép người dùng di chuyển điểm đánh dấu trên
ánh xạ bằng cách đặt thuộc tính draggable
của điểm đánh dấu thành
true
. Để biết thêm thông tin về điểm đánh dấu có thể kéo, xem
bên dưới.
Thêm một điểm đánh dấu
Chiến lược phát hành đĩa đơn
google.maps.Marker
hàm khởi tạo lấy một đối tượng Marker options
duy nhất
cố định, chỉ định các thuộc tính ban đầu của điểm đánh dấu.
Các trường sau đây đặc biệt quan trọng và thường được đặt khi tạo điểm đánh dấu:
-
position
(bắt buộc) chỉ định mộtLatLng
xác định vị trí ban đầu của điểm đánh dấu. Một để truy xuấtLatLng
là sử dụng phương thức Dịch vụ mã hoá địa lý. -
map
(không bắt buộc) chỉ địnhMap
mà vào đó để đặt điểm đánh dấu. Nếu bạn không chỉ định bản đồ trong quá trình xây dựng điểm đánh dấu, điểm đánh dấu được tạo nhưng không được gắn vào (hoặc hiển thị trên) bản đồ. Bạn có thể thêm điểm đánh dấu sau bằng cách gọisetMap()
.
Ví dụ sau đây thêm một điểm đánh dấu đơn giản vào bản đồ tại Uluru, trong trung tâm Úc:
TypeScript
function initMap(): void { const myLatLng = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: myLatLng, } ); new google.maps.Marker({ position: myLatLng, map, title: "Hello World!", }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const myLatLng = { lat: -25.363, lng: 131.044 }; const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: myLatLng, }); new google.maps.Marker({ position: myLatLng, map, title: "Hello World!", }); } window.initMap = initMap;
Dùng thử mẫu
Trong ví dụ trên, điểm đánh dấu được đặt trên bản đồ tại thời điểm xây dựng
điểm đánh dấu bằng cách sử dụng thuộc tính map
trong các tuỳ chọn điểm đánh dấu.
Ngoài ra, bạn có thể thêm điểm đánh dấu vào bản đồ trực tiếp bằng cách sử dụng
phương thức setMap()
của điểm đánh dấu, như trong ví dụ bên dưới:
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);
The marker's title
will appear as a tooltip.
If you do not wish to pass any Marker options
in the
marker's constructor, instead pass an empty object {}
in the
last argument of the constructor.
Remove a marker
To remove a marker from the map, call the setMap()
method
passing null
as the argument.
marker.setMap(null);
Note that the above method does not delete the marker. It removes the
marker from the map. If instead you wish to delete the marker, you should
remove it from the map, and then set the marker itself to
null
.
If you wish to manage a set of markers, you should create an array to hold
the markers. Using this array, you can then call setMap()
on
each marker in the array in turn when you need to remove the markers. You
can delete the markers by removing them from the map and then setting the
array's length
to 0
, which removes all
references to the markers.
Customize a marker image
You can customize the visual appearance of markers by specifying an image file or vector-based icon to display instead of the default Google Maps pushpin icon. You can add text with a marker label, and use complex icons to define clickable regions, and set the stack order of markers.
Markers with image icons
In the most basic case, an icon can specify an image to use instead of the
default Google Maps pushpin icon. To specify such an icon, set the
marker's icon
property to the URL of an image. The Maps JavaScript API will size the icon automatically.
TypeScript
// This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: { lat: -33, lng: 151 }, } ); const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachMarker = new google.maps.Marker({ position: { lat: -33.89, lng: 151.274 }, map, icon: image, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example adds a marker to indicate the position of Bondi Beach in Sydney, // Australia. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, }); const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; const beachMarker = new google.maps.Marker({ position: { lat: -33.89, lng: 151.274 }, map, icon: image, }); } window.initMap = initMap;
Dùng thử mẫu
Điểm đánh dấu có biểu tượng dựa trên vectơ
Bạn có thể sử dụng đường dẫn vectơ SVG tuỳ chỉnh để xác định giao diện hình ảnh của
điểm đánh dấu. Để thực hiện việc này, hãy truyền giá trị cố định của đối tượng Symbol
bằng
đường dẫn mong muốn đến thuộc tính icon
của điểm đánh dấu. Bạn có thể xác định
đường dẫn tuỳ chỉnh đang sử dụng
ký hiệu đường dẫn SVG hoặc sử dụng một trong các đường dẫn được xác định trước trong
google.maps.SymbolPath. Thuộc tính anchor
là bắt buộc để điểm đánh dấu
hiển thị chính xác khi mức thu phóng thay đổi. Tìm hiểu thêm về
sử dụng Ký hiệu để tạo biểu tượng dựa trên vectơ
cho điểm đánh dấu (và hình nhiều đường).
TypeScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap(): void { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 9, center: center, } ); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// This example uses SVG path notation to add a vector-based symbol // as the icon for a marker. The resulting icon is a marker-shaped // symbol with a blue fill and no border. function initMap() { const center = new google.maps.LatLng(-33.712451, 150.311823); const map = new google.maps.Map(document.getElementById("map"), { zoom: 9, center: center, }); const svgMarker = { path: "M-1.547 12l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM0 0q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z", fillColor: "blue", fillOpacity: 0.6, strokeWeight: 0, rotation: 0, scale: 2, anchor: new google.maps.Point(0, 20), }; new google.maps.Marker({ position: map.getCenter(), icon: svgMarker, map: map, }); } window.initMap = initMap;
Dùng thử mẫu
Nhãn điểm đánh dấu
![](https://developers.google.cn/static/maps/documentation/javascript/images/markerlabel.png?authuser=6&hl=vi)
Nhãn điểm đánh dấu là một chữ cái hoặc số xuất hiện bên trong một điểm đánh dấu. Chiến lược phát hành đĩa đơn
hình ảnh điểm đánh dấu trong phần này hiển thị một nhãn đánh dấu có chữ 'B'
trên đó. Bạn có thể chỉ định nhãn đánh dấu dưới dạng chuỗi hoặc
MarkerLabel
bao gồm một chuỗi và các thuộc tính nhãn khác.
Khi tạo một điểm đánh dấu, bạn có thể chỉ định một thuộc tính label
trong
thời gian
MarkerOptions
. Ngoài ra, bạn có thể gọi setLabel()
trên
Điểm đánh dấu
để đặt nhãn trên một điểm đánh dấu hiện có.
Ví dụ sau đây hiển thị các điểm đánh dấu được gắn nhãn khi người dùng nhấp vào ánh xạ:
TypeScript
// In the following example, markers appear when the user clicks on the map. // Each marker is labeled with a single alphabetical character. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let labelIndex = 0; function initMap(): void { const bangalore = { lat: 12.97, lng: 77.59 }; const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: bangalore, } ); // This event listener calls addMarker() when the map is clicked. google.maps.event.addListener(map, "click", (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: google.maps.LatLngLiteral, map: google.maps.Map) { // Add the marker at the clicked location, and add the next-available label // from the array of alphabetical characters. new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// In the following example, markers appear when the user clicks on the map. // Each marker is labeled with a single alphabetical character. const labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let labelIndex = 0; function initMap() { const bangalore = { lat: 12.97, lng: 77.59 }; const 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", (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. new google.maps.Marker({ position: location, label: labels[labelIndex++ % labels.length], map: map, }); } window.initMap = initMap;
Dùng thử mẫu
Biểu tượng phức tạp
Bạn có thể chỉ định các hình dạng phức tạp để biểu thị các vùng có thể nhấp vào, và
chỉ định cách các biểu tượng sẽ xuất hiện so với các lớp phủ khác (
"thứ tự ngăn xếp"). Các biểu tượng được chỉ định theo cách này sẽ đặt
icon
các thuộc tính cho một đối tượng thuộc loại
Icon
.
Icon
các đối tượng xác định một hình ảnh. Chúng cũng xác định size
của phần tử
biểu tượng, origin
của biểu tượng (nếu hình ảnh bạn muốn là một phần
của một hình ảnh lớn hơn trong sprite) và
anchor
, nơi sẽ đặt điểm phát sóng của biểu tượng (tức là
dựa trên nguồn gốc).
Nếu bạn đang sử dụng một nhãn có phần tử tuỳ chỉnh
, bạn có thể định vị nhãn bằng
thuộc tính labelOrigin
trong
Icon
.
TypeScript
// 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(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { 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. const beaches: [string, number, number, number][] = [ ["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: google.maps.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. const 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 // <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. const shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: "poly", }; for (let i = 0; i < beaches.length; i++) { const beach = beaches[i]; new google.maps.Marker({ position: { lat: beach[1], lng: beach[2] }, map, icon: image, shape: shape, title: beach[0], zIndex: beach[3], }); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// 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() { const 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. const 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. const 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 // <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. const shape = { coords: [1, 1, 1, 20, 18, 20, 18, 1], type: "poly", }; for (let i = 0; i < beaches.length; i++) { const beach = beaches[i]; new google.maps.Marker({ position: { lat: beach[1], lng: beach[2] }, map, icon: image, shape: shape, title: beach[0], zIndex: beach[3], }); } } window.initMap = initMap;
Dùng thử mẫu
Đang chuyển đổi các đối tượng MarkerImage
thành loại Icon
Cho đến phiên bản 3.10 của Maps JavaScript API, các biểu tượng phức tạp
đã được xác định là đối tượng MarkerImage
. Chiến lược phát hành đĩa đơn
Đối tượng Icon
cố định đã được thêm vào phiên bản 3.10 và thay thế
MarkerImage
từ phiên bản 3.11 trở đi.
Hằng đối tượng Icon
hỗ trợ các tham số tương tự như
MarkerImage
, cho phép bạn dễ dàng chuyển đổi
MarkerImage
cho Icon
bằng cách xoá
hàm khởi tạo, gói các tham số trước trong {}
và
thêm tên của từng thông số. Ví dụ:
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));
becomes
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) };
Optimize markers
Optimization enhances performance by rendering many markers as a single static element. This is useful in cases where a large number of markers is required. By default, the Maps JavaScript API will decide whether a marker will be optimized. When there is a large number of markers, the Maps JavaScript API will attempt to render markers with optimization. Not all Markers can be optimized; in some situations, the Maps JavaScript API may need to render Markers without optimization. Disable optimized rendering for animated GIFs or PNGs, or when each marker must be rendered as a separate DOM element. The following example shows creating an optimized marker:
var marker = new google.maps.Marker({ position: myLatlng, title:"Hello World!", optimized: true });
Làm cho điểm đánh dấu có thể truy cập được
Bạn có thể làm cho một điểm đánh dấu có thể truy cập được bằng cách thêm sự kiện trình nghe lượt nhấp, và
đặt optimized
thành false
. Trình nghe lượt nhấp
làm cho điểm đánh dấu có ngữ nghĩa của nút. Có thể truy cập ngữ nghĩa này bằng cách sử dụng
điều hướng bằng bàn phím, trình đọc màn hình, v.v. Sử dụng
Tuỳ chọn title
để trình bày văn bản hỗ trợ tiếp cận cho một điểm đánh dấu.
Trong ví dụ sau, điểm đánh dấu đầu tiên nhận được tiêu điểm khi thẻ được đã nhấn; sau đó, bạn có thể sử dụng các phím mũi tên để di chuyển giữa các điểm đánh dấu. Nhấn tab một lần nữa để tiếp tục di chuyển qua các nút điều khiển còn lại trên bản đồ. Nếu một điểm đánh dấu có một cửa sổ thông tin, bạn có thể mở cửa sổ đó bằng cách nhấp vào điểm đánh dấu hoặc bằng cách nhấn phím enter hoặc phím cách khi điểm đánh dấu được chọn. Khi cửa sổ thông tin đóng lại, tiêu điểm sẽ trở lại điểm đánh dấu được liên kết.
TypeScript
// The following example creates five accessible and // focusable markers. function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 12, center: { lat: 34.84555, lng: -111.8035 }, } ); // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to // move between markers; press tab again to cycle through the map controls. const tourStops: [google.maps.LatLngLiteral, string][] = [ [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"], [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"], [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"], [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"], [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"], ]; // Create an info window to share between markers. const infoWindow = new google.maps.InfoWindow(); // Create the markers. tourStops.forEach(([position, title], i) => { const marker = new google.maps.Marker({ position, map, title: `${i + 1}. ${title}`, label: `${i + 1}`, optimized: false, }); // Add a click listener for each marker, and set up the info window. marker.addListener("click", () => { infoWindow.close(); infoWindow.setContent(marker.getTitle()); infoWindow.open(marker.getMap(), marker); }); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// The following example creates five accessible and // focusable markers. function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 12, center: { lat: 34.84555, lng: -111.8035 }, }); // Set LatLng and title text for the markers. The first marker (Boynton Pass) // receives the initial focus when tab is pressed. Use arrow keys to // move between markers; press tab again to cycle through the map controls. const tourStops = [ [{ lat: 34.8791806, lng: -111.8265049 }, "Boynton Pass"], [{ lat: 34.8559195, lng: -111.7988186 }, "Airport Mesa"], [{ lat: 34.832149, lng: -111.7695277 }, "Chapel of the Holy Cross"], [{ lat: 34.823736, lng: -111.8001857 }, "Red Rock Crossing"], [{ lat: 34.800326, lng: -111.7665047 }, "Bell Rock"], ]; // Create an info window to share between markers. const infoWindow = new google.maps.InfoWindow(); // Create the markers. tourStops.forEach(([position, title], i) => { const marker = new google.maps.Marker({ position, map, title: `${i + 1}. ${title}`, label: `${i + 1}`, optimized: false, }); // Add a click listener for each marker, and set up the info window. marker.addListener("click", () => { infoWindow.close(); infoWindow.setContent(marker.getTitle()); infoWindow.open(marker.getMap(), marker); }); }); } window.initMap = initMap;
Dùng thử mẫu
Tạo ảnh động cho một điểm đánh dấu
Bạn có thể tạo ảnh động cho các điểm đánh dấu để chúng thể hiện chuyển động động theo nhiều cách khác nhau.
trong các trường hợp khác nhau. Để chỉ định cách tạo ảnh động cho một điểm đánh dấu, hãy sử dụng
thuộc tính animation
của điểm đánh dấu, thuộc loại
google.maps.Animation
. Nội dung sau đây
Animation
giá trị được hỗ trợ:
-
DROP
cho biết điểm đánh dấu phải thả từ đầu bản đồ đến vị trí cuối cùng của nó khi được đặt lần đầu tiên trên bản đồ. Hoạt ảnh sẽ dừng sau khi điểm đánh dấu dừng lại vàanimation
sẽ quay vềnull
. Loại ảnh động này thường được chỉ định trong quá trình tạoMarker
. -
BOUNCE
cho biết điểm đánh dấu phải trả về vị trí. Đáp điểm đánh dấu trả lại sẽ tiếp tục bật lại cho tới khi Thuộc tínhanimation
được đặt rõ ràng thànhnull
.
Bạn có thể bắt đầu tạo ảnh động trên một điểm đánh dấu hiện có bằng cách gọi
setAnimation()
trên đối tượng Marker
.
TypeScript
// 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. let marker: google.maps.Marker; function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 13, center: { lat: 59.325, lng: 18.07 }, } ); marker = new google.maps.Marker({ 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); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// 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. let marker; function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 13, center: { lat: 59.325, lng: 18.07 }, }); marker = new google.maps.Marker({ 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); } } window.initMap = initMap;
Dùng thử mẫu
Nếu có nhiều điểm đánh dấu, bạn có thể không muốn thả chúng trên bản đồ
cùng một lúc. Bạn có thể tận dụng setTimeout()
để tạo không gian
bút dạ ảnh động bằng cách sử dụng mẫu như được hiển thị dưới đây:
function drop() { for (var i =0; i < markerArray.length; i++) { setTimeout(function() { addMarkerMethod(); }, i * 200); } }
Làm cho điểm đánh dấu có thể kéo
Để cho phép người dùng kéo điểm đánh dấu đến một vị trí khác trên bản đồ, hãy đặt
draggable
đến true
trong các tùy chọn điểm đánh dấu.
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!" });
Tuỳ chỉnh điểm đánh dấu hơn nữa
Để có điểm đánh dấu được tuỳ chỉnh đầy đủ, hãy xem ví dụ về cửa sổ bật lên tuỳ chỉnh.
Để biết thêm các phần mở rộng của lớp Điểm đánh dấu, quản lý và phân cụm điểm đánh dấu cũng như tuỳ chỉnh lớp phủ, hãy xem thư viện nguồn mở.
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2024-08-16 UTC.