地图标记（MapMarker）

示例

示例源码

import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { MbMap, MbMapMarker, MbTiandituLayer } from '@mapbox-react/core'

const App = () => {
  const [mapCenter] = useState([116.38745, 39.91266])
  const [zoom, setZoom] = useState(10)

  const [draggable, setDraggable] = useState(true)
  const defaultMarkerCoordinates = [116.38745, 39.91266]
  const customMarkerCoordinates = [116.47123, 39.91266]
  const [customMarkerCoordinates2, setCustomMarkerCoordinates2] = useState([
    116.32123, 39.91266,
  ])
  const [customMarkerCoordinates3, setCustomMarkerCoordinates3] = useState([
    116.38123, 39.99266,
  ])

  const Test1 = () => (
    <div style={{ color: 'red', fontSize: '20px', fontWeight: 'bolder' }}>
      React Comp
    </div>
  )

  return (
    <div className="map-wrapper">
      <MbMap center={mapCenter} zoom={zoom} pitch={10}>
        <MbTiandituLayer types={['vec']} />
        <MbMapMarker coordinates={defaultMarkerCoordinates} color="red" />
        <MbMapMarker
          coordinates={customMarkerCoordinates}
          draggable={draggable}
        >
          <button className="primary">Button</button>
        </MbMapMarker>
        <MbMapMarker
          coordinates={customMarkerCoordinates2}
          draggable={draggable}
          onUpdateCoordinates={(coords) => setCustomMarkerCoordinates2(coords)}
        >
          <img
            src="https://cdn.pixabay.com/animation/2022/10/11/23/03/23-03-06-809_512.gif"
            style={{ width: '64px', height: '64px' }}
          />
        </MbMapMarker>
        <MbMapMarker
          coordinates={customMarkerCoordinates3}
          draggable={draggable}
          onUpdateCoordinates={(coords) => setCustomMarkerCoordinates3(coords)}
        >
          <Test1 />
        </MbMapMarker>
      </MbMap>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector('#root'))

API

PROPS

名称	描述	类型	默认值
anchor	表示标记的哪个部位距离坐标点最近	string（'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'）	bottom
color	默认标记的颜色	string	#3FB1CE
coordinates	v-model marker的经纬度位置	number[]	-
draggable	能否在地图拖拽	boolean	true
offset	偏移量 正数表示右/上	number[]	[0, 0]
children	子节点	any	-

EVENTS

名称	描述	参数
onCreated	地图初始化完成事件	-
onUpdateCoordinates	marker位置更新事件	number[]

METHODS

名称	描述	定义