Marker
Sử dụng
demo.js
import { useState } from "react";
import { MFMap, MFMarker } from "react-map4d-map";
const DemoMarker = () => {
const [post, setPost] = useState({ lat: 16.0685, lng: 108.2215 });
return (
<>
<div style={{ width: "100%", height: "300px" }}>
<MFMap
options={{
center: post,
zoom: 15,
}}
version={"2.4"}
accessKey={"d69ab3c4b70818de546a1b1bb15aeaa7"}
>
<MFMarker position={post} />
</MFMap>
</div>
</>
);
};
export default DemoMarker;
Kết quả
Props
No | Name | isRequired | Type | Default value | Description |
---|---|---|---|---|---|
1 | position | true | ILatLng (opens in a new tab) | Vị trí trên map | |
2 | visible | false | boolean | true | Cho phép hiển thị |
3 | anchor | false | IPoint (opens in a new tab) | {x: 0.5, y: 1.0} | vị trí điểm neo so với marker |
4 | labelAnchor | fasle | IPoint (opens in a new tab) | {x: 0.5, y: 0.5} | Vị trí điểm neo so với label |
5 | icon | fasle | IconProps | Tùy chọn cho marker (width, height, url) | |
6 | elevation | fasle | number | 0 | Độ cao của điểm neo so với mực nước biển |
7 | rotation | fasle | number | 0 | chỉ định góc quay của Marker theo đơn vị là Độ |
8 | title | fasle | string | Tiêu đề của Marker. Tiêu đề sẽ được hiển thị ở dòng đầu tiên của bảng thông tin Marker | |
9 | snippet | fasle | string | Mô tả thông tin ngắn gọn cho Marker. Snippet sẽ được hiển thị ở bẳng thông tin của Marker và phía dưới dòng tiêu đề | |
10 | windowAnchor | false | IPoint (opens in a new tab) | {x: 0.5, y: 0.0} | Xác định điểm neo so với bảng thông tin của Marker. Bảng thông tin này sẽ hiện lên khi click vào Marker |
11 | zIndex | false | number | 0 | Chỉ định thứ tự chồng nhau giữa các Marker với nhau hoặc giữa Marker với các đối tượng khác trên bản đồ |
12 | label | false | string | MarkerLabel | Chỉ định label của Marker. Label sẽ được hiển thị ở tâm của Marker | |
13 | draggable | fasle | boolean | false | Cho phép người dùng có thể kéo Marker trên bản đồ hay không |
14 | iconView | fasle | string | Node | Cho phép thêm node HTML vào và thay thế icon mặc định của Marker | |
15 | userInteractionEnabled | fasle | boolean | Cho phép người dùng có thể tương tác được với Marker hay không | |
16 | map | fasle | map4d.Map | Hiển thị marker ở map nào, nếu không có sẽ hiển thị ở map gần nhất chứa marker | |
17 | infoWindow | fasle | string | Node | Custom bảng thông tin thay cho bảng thông tin mặc định | |
18 | infoContents | fasle | string | Node | Custom nội dung cho bảng thông tin | |
19 | showInfoWindow | fasle | boolean | Hiện bảng thông tin của marker | |
20 | onClick | fasle | (args) => void | Event được gọi sau khi click marker | |
21 | onCreated | fasle | (marker) => void | Event sau khi tạo marker | |
22 | onRightClick | fasle | (args) => void | Event được gọi sau khi right click marker | |
23 | onDragEnd | fasle | (args) => void | Event khi kết thúc kéo marker | |
24 | onHover | fasle | (args) => void | Event khi hover vào marker |
Last updated on April 12, 2023