Drawing on the Map
Marker

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

NoNameisRequiredTypeDefault valueDescription
1positiontrueILatLng (opens in a new tab)Vị trí trên map
2visiblefalsebooleantrueCho phép hiển thị
3anchorfalseIPoint (opens in a new tab){x: 0.5, y: 1.0}vị trí điểm neo so với marker
4labelAnchorfasleIPoint (opens in a new tab){x: 0.5, y: 0.5}Vị trí điểm neo so với label
5iconfasleIconPropsTùy chọn cho marker (width, height, url)
6elevationfaslenumber0Độ cao của điểm neo so với mực nước biển
7rotationfaslenumber0chỉ định góc quay của Marker theo đơn vị là Độ
8titlefaslestringTiêu đề của Marker. Tiêu đề sẽ được hiển thị ở dòng đầu tiên của bảng thông tin Marker
9snippetfaslestringMô 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 đề
10windowAnchorfalseIPoint (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
11zIndexfalsenumber0Chỉ đị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 đồ
12labelfalsestring | MarkerLabelChỉ định label của Marker. Label sẽ được hiển thị ở tâm của Marker
13draggablefaslebooleanfalseCho phép người dùng có thể kéo Marker trên bản đồ hay không
14iconViewfaslestring | NodeCho phép thêm node HTML vào và thay thế icon mặc định của Marker
15userInteractionEnabledfaslebooleanCho phép người dùng có thể tương tác được với Marker hay không
16mapfaslemap4d.MapHiển thị marker ở map nào, nếu không có sẽ hiển thị ở map gần nhất chứa marker
17infoWindowfaslestring | NodeCustom bảng thông tin thay cho bảng thông tin mặc định
18infoContentsfaslestring | NodeCustom nội dung cho bảng thông tin
19showInfoWindowfaslebooleanHiện bảng thông tin của marker
20onClickfasle(args) => voidEvent được gọi sau khi click marker
21onCreatedfasle(marker) => voidEvent sau khi tạo marker
22onRightClickfasle(args) => voidEvent được gọi sau khi right click marker
23onDragEndfasle(args) => voidEvent khi kết thúc kéo marker
24onHoverfasle(args) => voidEvent khi hover vào marker
Last updated on April 12, 2023