uiwjs / react-baidu-map

基于 React 封装的百度地图组件,支持 React Hook,帮助你轻松的接入地图到 React 项目中。
https://uiwjs.github.io/react-baidu-map
MIT License
225 stars 22 forks source link

how to get the BMap when custom a marker #7

Closed ceu closed 4 years ago

jaywcjlove commented 4 years ago

@ceu Example.

import { Map, Marker, APILoader } from '@uiw/react-baidu-map';

const Demo = () => {
  function markerRef(props) {
    if (props && props.marker) {
      console.log('marker::', props.marker, props.map, props.BMap);
    }
  }
  return (
    <div style={{ width: '100%', height: '350px' }}>
      <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
        <Map widget={['NavigationControl']} zoom={13}>
          <Marker ref={markerRef} animation={2} position={{ lng: 121.411535, lat: 31.222965 }} />
          <Marker position={{ lng: 121.465145, lat: 31.241245 }} />
          <Marker position={{ lng: 121.466008, lat: 31.220001 }} type="loc_red" /> 
          <Marker position={{ lng: 121.501365, lat: 31.224942 }} type="simple_blue" />
          <Marker position={{ lng: 121.464858, lat: 31.202705 }} type="simple_red" />
          <Marker position={{ lng: 121.458534, lat: 31.224942}} type="start" />
          <Marker position={{ lng: 121.434962, lat: 31.200729 }} type="end" />
          <Marker position={{ lng: 121.478943, lat: 31.2531 }} type="location" />
          <Marker position={{ lng: 121.516888, lat: 31.249149 }} type="red1" />
          <Marker position={{ lng: 121.512576, lat: 31.240504 }} type="red2" />
          <Marker position={{ lng: 121.513726, lat: 31.233588}} type="blue3" />
          <Marker position={{ lng: 121.520912, lat: 31.234576}} type="blue4" />
          <Marker position={{ lng: 121.491879, lat: 31.195045}} type="dot_red" />
          <Marker position={{ lng: 121.485555, lat: 31.195045}} type="dot_blue" />
        </Map>
      </APILoader>
    </div>
  );
};
ReactDOM.render(<Demo />, _mount_);
ceu commented 4 years ago

get you , thanks