Lớp Marker (Điểm đánh dấu)
Lớp google.maps.Marker
Lớp này mở rộng MVCObject
.
Truy cập bằng cách gọi const {Marker} = await google.maps.importLibrary("marker")
. Xem Thư viện trong API JavaScript Maps.
Hàm dựng | |
---|---|
Marker |
Marker([opts]) Các thông số:
Tạo một điểm đánh dấu với các tùy chọn được chỉ định. Nếu một bản đồ được chỉ định, điểm đánh dấu sẽ được thêm vào bản đồ trong quá trình xây dựng. Lưu ý rằng vị trí phải được đặt để điểm đánh dấu hiển thị. |
Hằng số | |
---|---|
MAX_ZINDEX |
Chỉ mục z mặc định tối đa mà API sẽ gán cho một điểm đánh dấu. Bạn có thể đặt chỉ mục z cao hơn để đưa điểm đánh dấu lên phía trước. |
Phương thức | |
---|---|
getAnimation |
getAnimation() Tham số: Không có
Giá trị trả về:
Animation|null|undefined Tải ảnh động hiện đang chạy. |
getClickable |
getClickable() Tham số: Không có
Giá trị trả về:
boolean Đúng nếu Điểm đánh dấu có thể nhấp vào.Nhận trạng thái có thể nhấp của Marker . |
getCursor |
getCursor() Tham số: Không có
Giá trị trả về:
string|null|undefined Hiển thị loại con trỏ chuột khi di chuột. |
getDraggable |
getDraggable() Tham số: Không có
Giá trị trả về:
boolean Đúng nếu điểm đánh dấu có thể kéo được.Xem trạng thái có thể kéo của Marker . |
getIcon |
getIcon() Tham số: Không có
Lấy biểu tượng của Marker . Vui lòng xem MarkerOptions.icon . |
getLabel |
getLabel() Tham số: Không có
Giá trị trả về:
MarkerLabel|string|null|undefined Lấy nhãn của Marker . Vui lòng xem MarkerOptions.label . |
getMap |
getMap() Tham số: Không có
Giá trị trả về:
Map|StreetViewPanorama Tải bản đồ hoặc panaroama mà Marker hiển thị trên đó. |
getOpacity |
getOpacity() Tham số: Không có
Giá trị trả về:
number|null|undefined Một số từ 0,0 đến 1,0.Lấy độ mờ của Marker . |
getPosition |
getPosition() Tham số: Không có
Giá trị trả về:
LatLng|null|undefined Lấy vị trí của Marker . |
getShape |
getShape() Tham số: Không có
Giá trị trả về:
MarkerShape|null|undefined |
getTitle |
getTitle() Tham số: Không có
Giá trị trả về:
string|null|undefined Lấy tiêu đề của chú thích Marker . Vui lòng xem MarkerOptions.title . |
getVisible |
getVisible() Tham số: Không có
Giá trị trả về:
boolean Đúng nếu Điểm đánh dấu hiển thị.Xem chế độ hiển thị của Marker . |
getZIndex |
getZIndex() Tham số: Không có
Giá trị trả về:
number|null|undefined zIndex của Điểm đánh dấu.Lấy zIndex của Marker . Vui lòng xem MarkerOptions.zIndex . |
setAnimation |
setAnimation([animation]) Các thông số:
Giá trị trả lại hàng: Không có
Bắt đầu tạo ảnh động. Mọi ảnh động đang diễn ra sẽ bị huỷ. Các ảnh động hiện được hỗ trợ là: Animation.BOUNCE , Animation.DROP . Việc truyền null vào sẽ khiến mọi ảnh động dừng lại. |
setClickable |
setClickable(flag) Các thông số:
Giá trị trả lại hàng: Không có
Thiết lập nếu Marker có thể nhấp vào được. |
setCursor |
setCursor([cursor]) Các thông số:
Giá trị trả lại hàng: Không có
Đặt loại con trỏ chuột hiển thị khi di chuột. |
setDraggable |
setDraggable(flag) Các thông số:
Giá trị trả lại hàng: Không có
Thiết lập nếu Marker có thể kéo được. |
setIcon |
setIcon([icon]) Giá trị trả lại hàng: Không có
Đặt biểu tượng cho Marker . Vui lòng xem MarkerOptions.icon . |
setLabel |
setLabel([label]) Các thông số:
Giá trị trả lại hàng: Không có
Đặt nhãn cho Marker . Vui lòng xem MarkerOptions.label . |
setMap |
setMap(map) Các thông số:
Giá trị trả lại hàng: Không có
Hiển thị Marker trên bản đồ hoặc ảnh toàn cảnh được chỉ định. Nếu bản đồ được đặt thành null , điểm đánh dấu sẽ bị xóa. |
setOpacity |
setOpacity([opacity]) Các thông số:
Giá trị trả lại hàng: Không có
Đặt độ mờ của Marker . |
setOptions |
setOptions(options) Các thông số:
Giá trị trả lại hàng: Không có
Đặt tuỳ chọn cho Marker . |
setPosition |
setPosition([latlng]) Các thông số:
Giá trị trả lại hàng: Không có
Đặt bài đăng cho Marker . |
setShape |
setShape([shape]) Các thông số:
Giá trị trả lại hàng: Không có
|
setTitle |
setTitle([title]) Các thông số:
Giá trị trả lại hàng: Không có
Đặt tiêu đề của chú thích Marker . Vui lòng xem MarkerOptions.title . |
setVisible |
setVisible(visible) Các thông số:
Giá trị trả lại hàng: Không có
Đặt nếu Marker hiển thị. |
setZIndex |
setZIndex([zIndex]) Các thông số:
Giá trị trả lại hàng: Không có
Thiết lập zIndex của Marker . Vui lòng xem MarkerOptions.zIndex . |
Kế thừa:
addListener ,
bindTo ,
get ,
notify ,
set ,
setValues ,
unbind ,
unbindAll
|
Sự kiện | |
---|---|
animation_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính ảnh động Marker thay đổi. |
click |
function(event) Đối số:
Sự kiện này được kích hoạt khi người dùng nhấp vào biểu tượng Marker . |
clickable_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính có thể nhấp Marker thay đổi. |
contextmenu |
function(event) Đối số:
Sự kiện này được kích hoạt khi sự kiện trình đơn ngữ cảnh DOM được kích hoạt trên Marker |
cursor_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính con trỏ Marker thay đổi. |
dblclick |
function(event) Đối số:
Sự kiện này được kích hoạt khi người dùng nhấp đúp vào biểu tượng Marker . |
drag |
function(event) Đối số:
Sự kiện này được kích hoạt liên tục trong khi người dùng kéo Marker . |
dragend |
function(event) Đối số:
Sự kiện này được kích hoạt khi người dùng ngừng kéo Marker . |
draggable_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính có thể kéo của Marker thay đổi. |
dragstart |
function(event) Đối số:
Sự kiện này được kích hoạt khi người dùng bắt đầu kéo Marker . |
flat_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính phẳng Marker thay đổi. |
icon_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính biểu tượng Marker thay đổi. |
mousedown |
function(event) Đối số:
Sự kiện này được kích hoạt để di chuột xuống trên Marker . |
mouseout |
function(event) Đối số:
Sự kiện này được kích hoạt khi chuột rời khỏi khu vực biểu tượng Marker . |
mouseover |
function(event) Đối số:
Sự kiện này được kích hoạt khi chuột di chuyển vào khu vực biểu tượng Marker . |
mouseup |
function(event) Đối số:
Sự kiện này được kích hoạt cho một lượt di chuột lên trên Marker . |
position_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính vị trí Marker thay đổi. |
shape_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính hình dạng Marker thay đổi. |
title_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính tiêu đề Marker thay đổi. |
visible_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính hiển thị Marker thay đổi. |
zindex_changed |
function() Đối số: Không có
Sự kiện này được kích hoạt khi thuộc tính zIndex của Marker thay đổi. |
|
function(event) Đối số:
Sự kiện này được kích hoạt cho một lượt nhấp chuột phải vào Marker . |
Giao diện MarkerOptions
Giao diện google.maps.MarkerOptions
Đối tượng MarkerOptions dùng để xác định các thuộc tính có thể được đặt trên một Điểm đánh dấu.
Thuộc tính | |
---|---|
anchorPoint optional |
Loại:
Point optional Độ lệch từ vị trí của điểm đánh dấu đến điểm đầu của một InfoWindow đã được mở với điểm đánh dấu là điểm neo. |
animation optional |
Loại:
Animation optional Mặc định:
null Ảnh động nào cần phát khi điểm đánh dấu được thêm vào bản đồ. |
clickable optional |
Loại:
boolean optional Mặc định:
true Nếu true , điểm đánh dấu sẽ nhận được các sự kiện chuột và chạm. |
|
Loại:
string|CollisionBehavior optional Mặc định:
null Thiết lập hành vi va chạm cho các điểm đánh dấu trên bản đồ vectơ. |
crossOnDrag optional |
Loại:
boolean optional Mặc định:
true Nếu false , hãy tắt dấu chữ thập xuất hiện bên dưới điểm đánh dấu khi kéo. |
cursor optional |
Loại:
string optional Mặc định:
pointer Loại con trỏ chuột sẽ hiển thị khi di chuột. |
draggable optional |
Loại:
boolean optional Mặc định:
false Nếu true , bạn có thể kéo điểm đánh dấu. |
icon optional |
Biểu tượng cho nền trước. Nếu một chuỗi được cung cấp, chuỗi đó được coi là Icon với chuỗi là url . |
label optional |
Loại:
string|MarkerLabel optional Mặc định:
null Thêm nhãn vào điểm đánh dấu. Nhãn đá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. Nhãn có thể là một chuỗi hoặc một đối tượng MarkerLabel . Nếu không được cung cấp và MarkerOptions.title không được cung cấp, thì văn bản hỗ trợ tiếp cận (ví dụ: để sử dụng với trình đọc màn hình) sẽ được thêm vào điểm đánh dấu cùng với nội dung của nhãn đã cho. Xin lưu ý rằng label hiện chỉ được dùng cho văn bản hỗ trợ tiếp cận đối với các điểm đánh dấu không được tối ưu hoá. |
map optional |
Loại:
Map|StreetViewPanorama optional Bản đồ nơi hiển thị Điểm đánh dấu. Điểm đánh dấu cần có bản đồ để hiển thị điểm đánh dấu và có thể cung cấp Marker.setMap nếu không được cung cấp khi thi công điểm đánh dấu. |
opacity optional |
Loại:
number optional Mặc định: 1.0
Số từ 0,0, trong suốt đến 1,0, không rõ ràng. |
optimized optional |
Loại:
boolean optional Tính năng tối ưu hoá giúp nâng cao hiệu suất bằng cách hiển thị nhiều điểm đánh dấu dưới dạng một phần tử tĩnh duy nhất. Điều này hữu ích trong các trường hợp cần có một số lượng lớn điểm đánh dấu. Đọc thêm về việc tối ưu hoá điểm đánh dấu. |
position optional |
Loại:
LatLng|LatLngLiteral optional Đặt vị trí điểm đánh dấu. Điểm đánh dấu có thể được tạo nhưng không hiển thị cho đến khi vị trí của điểm được cung cấp, ví dụ như qua hành động hoặc lựa chọn của người dùng. Vị trí điểm đánh dấu có thể được cung cấp bằng Marker.setPosition nếu không được cung cấp khi thi công điểm đánh dấu. |
shape optional |
Loại:
MarkerShape optional Định nghĩa khu vực trên bản đồ hình ảnh dùng cho thao tác kéo/nhấp. |
title optional |
Loại:
string optional Mặc định:
undefined Văn bản di chuột qua. Nếu được cung cấp, văn bản hỗ trợ tiếp cận (ví dụ: để sử dụng với trình đọc màn hình) sẽ được thêm vào điểm đánh dấu cùng với giá trị đã cho. Xin lưu ý rằng title hiện chỉ được dùng cho văn bản hỗ trợ tiếp cận đối với các điểm đánh dấu không được tối ưu hoá. |
visible optional |
Loại:
boolean optional Mặc định:
true Nếu giá trị là true , điểm đánh dấu sẽ hiển thị. |
zIndex optional |
Loại:
number optional Tất cả các điểm đánh dấu được hiển thị trên bản đồ theo thứ tự zIndex, với giá trị càng cao thì càng được xuất hiện trước các điểm đánh dấu có giá trị thấp hơn. Theo mặc định, điểm đánh dấu được hiển thị theo vị trí dọc của chúng trên màn hình, với điểm đánh dấu thấp hơn sẽ xuất hiện trước các điểm đánh dấu phía trên màn hình. |
Hằng số CollisionBehavior
Hằng số google.maps.CollisionBehavior
Truy cập bằng cách gọi const {CollisionBehavior} = await google.maps.importLibrary("marker")
. Xem Thư viện trong API JavaScript Maps.
Hằng số | |
---|---|
OPTIONAL_AND_HIDES_LOWER_PRIORITY |
Chỉ hiển thị điểm đánh dấu nếu nó không chồng chéo với các điểm đánh dấu khác. Nếu hai điểm đánh dấu thuộc loại này trùng lặp, thì điểm có zIndex cao hơn sẽ hiển thị. Nếu các chỉ mục đó có cùng zIndex, thì chỉ số có vị trí màn hình dọc thấp hơn sẽ xuất hiện. |
REQUIRED |
Luôn hiển thị điểm đánh dấu bất kể xung đột. Đây là hành vi mặc định. |
REQUIRED_AND_HIDES_OPTIONAL |
Luôn hiển thị điểm đánh dấu bất kể va chạm và ẩn mọi điểm đánh dấu OPTIONAL_AND_HideS_ hiển thị_PRIORITY hoặc nhãn sẽ chồng chéo lên điểm đánh dấu. |
Giao diện Biểu tượng
Giao diện google.maps.Icon
Một cấu trúc đại diện cho hình ảnh biểu tượng Điểm đánh dấu.
Thuộc tính | |
---|---|
url |
Loại:
string URL của hình ảnh hoặc trang tính sprite. |
anchor optional |
Loại:
Point optional Vị trí neo một hình ảnh tương ứng với vị trí của điểm đánh dấu trên bản đồ. Theo mặc định, neo nằm dọc theo điểm giữa của phần dưới cùng của hình ảnh. |
labelOrigin optional |
Loại:
Point optional Nguồn gốc của nhãn tương ứng với góc trên cùng bên trái của hình ảnh biểu tượng, nếu nhãn do điểm đánh dấu cung cấp. Theo mặc định, điểm gốc nằm ở điểm giữa của hình ảnh. |
origin optional |
Loại:
Point optional Vị trí của hình ảnh trong một sprite, nếu có. Theo mặc định, điểm gốc nằm ở góc trên cùng bên trái của hình ảnh (0, 0) . |
scaledSize optional |
Loại:
Size optional Kích thước của toàn bộ hình ảnh sau khi điều chỉnh theo tỷ lệ, nếu có. Sử dụng thuộc tính này để kéo dài/thu nhỏ hình ảnh hoặc sprite. |
size optional |
Loại:
Size optional Kích thước hiển thị của sprite hoặc hình ảnh. Khi sử dụng sprite, bạn phải chỉ định kích thước sprite. Nếu không cung cấp kích thước, kích thước sẽ được đặt khi hình ảnh tải. |
Giao diện MarkerLabel
Giao diện google.maps.MarkerLabel
Các tuỳ chọn này chỉ định hình thức của nhãn đánh dấu. Nhãn của điểm đánh dấu là một chuỗi (thường là một ký tự đơn) và sẽ xuất hiện bên trong điểm đánh dấu. Nếu đang sử dụng điểm đánh dấu này cùng với một điểm đánh dấu tuỳ chỉnh, bạn có thể đặt lại vị trí điểm đánh dấu bằng thuộc tính labelOrigin
trong lớp Icon
.
Thuộc tính | |
---|---|
text |
Loại:
string Văn bản sẽ hiển thị trong nhãn. |
className optional |
Loại:
string optional Mặc định:
'' (chuỗi trống)Thuộc tính className của phần tử nhãn (tương đương với thuộc tính lớp của phần tử). Bạn có thể thêm nhiều lớp CSS được phân tách bằng dấu cách. Bạn chỉ có thể đặt màu, kích thước, độ đậm và bộ phông chữ qua các thuộc tính khác của MarkerLabel . Không được dùng các lớp CSS để thay đổi vị trí hoặc hướng của nhãn (ví dụ: sử dụng bản dịch và xoay) nếu đồng thời sử dụng tính năng quản lý xung đột điểm đánh dấu. |
color optional |
Loại:
string optional Mặc định:
'black' Màu của văn bản nhãn. |
fontFamily optional |
Loại:
string optional Họ phông chữ của văn bản nhãn (tương đương với thuộc tính họ phông chữ CSS). |
fontSize optional |
Loại:
string optional Mặc định:
'14px' Kích thước phông chữ của văn bản nhãn (tương đương với thuộc tính kích thước phông chữ CSS). |
fontWeight optional |
Loại:
string optional Độ đậm phông chữ của văn bản nhãn (tương đương với thuộc tính phông chữ CSS). |
Giao diện MarkerShape
Giao diện google.maps.MarkerShape
Đối tượng này xác định vùng có thể nhấp của hình ảnh điểm đánh dấu. Hình dạng này bao gồm hai thuộc tính — type
và coord
— giúp xác định vùng không trong suốt của hình ảnh.
Thuộc tính | |
---|---|
coords |
Loại:
Array<number> Định dạng của thuộc tính này phụ thuộc vào giá trị của type và tuân theo thông số kỹ thuật của w3 AREA coords có tại http://www.w3.org/TR/REC-html40/struct/objects.html#adef-coords. Thuộc tính coords là một mảng số nguyên cho biết vị trí điểm ảnh của hình dạng so với góc trên cùng bên trái của hình ảnh mục tiêu. Toạ độ phụ thuộc vào giá trị của type như sau: – circle : toạ độ là [x1,y1,r] ,trong đó x1, y2 là các toạ độ của tâm đường tròn và r là bán kính của đường tròn. - poly : toạ độ là [x1,y1,x2,y2...xn,yn] , trong đó mỗi cặp x,y chứa toạ độ của một đỉnh đa giác. - rect : toạ độ là [x1,y1,x2,y2] , trong đó x1, y1 là toạ độ của góc trên bên trái hình chữ nhật và x2, y2 là toạ độ các toạ độ dưới bên phải của hình chữ nhật. |
type |
Loại:
string Mô tả loại của hình dạng và có thể là circle , poly hoặc rect . |
Giao diện Symbol (Biểu tượng)
Giao diện google.maps.Symbol
Mô tả một biểu tượng, bao gồm một đường dẫn vectơ có kiểu. Biểu tượng có thể được dùng làm biểu tượng của một điểm đánh dấu hoặc được đặt trên một hình nhiều đường.
Thuộc tính | |
---|---|
path |
Loại:
SymbolPath|string Đường dẫn của biểu tượng, đường dẫn biểu tượng tích hợp sẵn hoặc đường dẫn tuỳ chỉnh được biểu thị bằng ký hiệu đường dẫn SVG. Bắt buộc. |
anchor optional |
Loại:
Point optional Mặc định:
google.maps.Point(0,0) Vị trí của biểu tượng so với điểm đánh dấu hoặc hình nhiều đường. Các toạ độ của đường đi của biểu tượng được dịch sang trái và lên theo toạ độ x và y của điểm neo tương ứng. Vị trí được biểu thị trong cùng một hệ toạ độ với đường đi của ký hiệu. |
fillColor optional |
Loại:
string optional Màu nền của biểu tượng. Tất cả các màu CSS3 đều được hỗ trợ, ngoại trừ các màu được đặt tên mở rộng. Đối với các điểm đánh dấu biểu tượng, giá trị mặc định này là "đen". Đối với các ký hiệu trên hình nhiều đường, giá trị này được đặt mặc định thành màu nét vẽ của hình nhiều đường tương ứng. |
fillOpacity optional |
Loại:
number optional Mặc định:
0 Độ mờ màu nền của biểu tượng. |
labelOrigin optional |
Loại:
Point optional Mặc định:
google.maps.Point(0,0) Nguồn gốc của nhãn so với nguồn gốc của đường dẫn, nếu nhãn do điểm đánh dấu cung cấp. Điểm gốc được biểu thị trong cùng một hệ toạ độ như đường đi của ký hiệu. Thuộc tính này không được sử dụng cho các ký hiệu trên hình nhiều đường. |
rotation optional |
Loại:
number optional Mặc định:
0 Góc xoay biểu tượng, được biểu thị theo độ theo chiều kim đồng hồ. Một ký hiệu trong IconSequence , trong đó fixedRotation là false được xoay tương ứng với góc của cạnh chứa đối tượng này. |
scale optional |
Loại:
number optional Số lượng mà biểu tượng được thay đổi theo tỷ lệ. Đối với các điểm đánh dấu biểu tượng, giá trị này mặc định là 1; sau khi chia tỷ lệ, biểu tượng có thể có kích thước bất kỳ. Đối với các biểu tượng trên hình nhiều đường, giá trị mặc định này sẽ lấy độ đậm nét của hình nhiều đường; sau khi chia tỷ lệ, ký hiệu phải nằm trong một hình vuông có kích thước 22 pixel được căn giữa tại điểm neo của biểu tượng. |
strokeColor optional |
Loại:
string optional Màu nét của biểu tượng. Tất cả các màu CSS3 đều được hỗ trợ, ngoại trừ các màu được đặt tên mở rộng. Đối với các điểm đánh dấu biểu tượng, giá trị mặc định này là "đen". Đối với các ký hiệu trên hình nhiều đường, giá trị này mặc định sẽ là màu nét vẽ của hình nhiều đường. |
strokeOpacity optional |
Loại:
number optional Độ mờ nét của biểu tượng. Đối với các điểm đánh dấu biểu tượng, giá trị mặc định này là 1. Đối với các ký hiệu trên hình nhiều đường, giá trị này mặc định cho độ mờ nét vẽ của hình nhiều đường. |
strokeWeight optional |
Loại:
number optional Mặc định:
Symbol.scale của biểu tượng.Độ đậm nét của biểu tượng. |
Hằng số SymbolPath
Hằng số google.maps.SymbolPath
Đường dẫn biểu tượng tích hợp sẵn.
Truy cập bằng cách gọi const {SymbolPath} = await google.maps.importLibrary("core")
. Xem Thư viện trong API JavaScript Maps.
Hằng số | |
---|---|
BACKWARD_CLOSED_ARROW |
Mũi tên đóng chỉ về phía sau. |
BACKWARD_OPEN_ARROW |
Mũi tên mở hướng về phía sau. |
CIRCLE |
Hình tròn. |
FORWARD_CLOSED_ARROW |
Một mũi tên đóng chỉ về phía trước. |
FORWARD_OPEN_ARROW |
Mũi tên mở chỉ về phía trước. |
Hằng số ảnh động
Hằng số google.maps.Animation
Có thể phát ảnh động trên một điểm đánh dấu. Sử dụng phương thức Marker.setAnimation
trên Marker hoặc tuỳ chọn MarkerOptions.animation
để phát ảnh động.
Truy cập bằng cách gọi const {Animation} = await google.maps.importLibrary("marker")
. Xem Thư viện trong API JavaScript Maps.
Hằng số | |
---|---|
BOUNCE |
Điểm đánh dấu bị nảy cho đến khi ảnh động dừng bằng cách gọi Marker.setAnimation bằng null . |
DROP |
Điểm đánh dấu rơi từ đầu bản đồ đến vị trí cuối cùng. Ảnh động sẽ ngừng hoạt động khi điểm đánh dấu dừng lại và Marker.getAnimation sẽ trả về null . Loại ảnh động này thường được chỉ định trong quá trình tạo điểm đánh dấu. |