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