@uiw/react-baidu-map-marker

^{使用 我的应用 也是一种 支持 我的方式：}

Marker 点标注组件
===


表示地图上一个图像标注。

``jsx
import { Marker, useMarker } from '@uiw/react-baidu-map';
// 或者单独安装使用
import Marker, { useMarker } from '@uiw/react-baidu-map-marker';
`

🚧 注意：需要使用到 ，新的封装 Marker 组建使用了 Context 来避免 map 对象传来传去。

$3

`jsx mdx:preview
import React from 'react';
import { Map, Provider, 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 (


export default Demo;
`

$3

`jsx mdx:preview
import React from 'react';
import { useState } from 'react';
import { Map, Provider, Marker, APILoader } from '@uiw/react-baidu-map';
const CustomIcon = () => {
const [position, setPosition] = useState({ lng: 121.466008, lat: 31.220001 });
const icon = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157));
return (
<>
setPosition({lng: 121.545202, lat: 31.246679})}>设置 position


);
}

const Demo = () => (


export default Demo;
`

$3

`jsx mdx:preview
import React from 'react';
import { useState } from 'react';
import { Map, Provider, Marker, APILoader } from '@uiw/react-baidu-map';

const CustomIcon = () => {
const [count, setCount] = useState(0)
const [message, setMessage] = useState('请点击标注点，小箭头!')
const [addEvent, setAddEvent] = useState(false);
const icon = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157));
function clickHandle({ type, target}) {
console.log('~~~~~clickHandle~~~~~', type, target);
setMessage('啊哈哈！你真的点击了！');
setCount(count + 1);
}
return (
<>


export default Demo;
`

$3

`jsx mdx:preview
import React from 'react';
import { useState } from 'react';
import { Map, Provider, Marker, APILoader } from '@uiw/react-baidu-map';

const CustomIcon = () => {
const [enableDragging, setEnableDragging] = useState(true);
const [postion, setPostion] = useState();
const [isAddEvent, setIsAddEvent] = useState(false);
const iconfox = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157));
const iconfox1 = new BMap.Icon('http://api0.map.bdimg.com/images/copyright_logo.png', new BMap.Size(300, 157));
const [icon, setIcon] = useState(iconfox);
function markerRef(props) {
if (props && props.marker && !isAddEvent) {
setIsAddEvent(true)
props.marker.removeEventListener('dragend', dragendHandle);
props.marker.addEventListener('dragend', dragendHandle);
}
}
function dragendHandle({ type, target, pixel, point }) {
console.log('dragendHandle', type, target, pixel, point);
setPostion(JSON.stringify(point));
}
return (
<>
setEnableDragging(!enableDragging)}>{enableDragging ? '禁用拖拽' : '启用拖拽'}
setIcon(iconfox1)}>设置icon
setIcon(iconfox)}>设置icon
{postion && {postion}}


);
}

const Demo = () => (


export default Demo;
`

$3

百度地图官方实例。

`jsx mdx:preview
import React from 'react';
import { useState } from 'react';
import { Map, Provider, Marker, APILoader } from '@uiw/react-baidu-map';

const CustomIcon = () => {
const [visiable, setVisiable] = useState(true);
const icon = new BMap.Symbol('m0.5,48.67105l106.55963,0m-53.03642,45.73853l52.06349,51.09042m-52.06349,-51.57716l-48.65731,51.57716m48.41391,-112.39955l0,60.82238m16.17517,-77.24814c0,8.93415 -7.24208,16.17461 -16.17517,16.17461c-8.93307,0 -16.17464,-7.24046 -16.17464,-16.17461c0,-8.93309 7.24156,-16.1747 16.17464,-16.1747c8.93309,0 16.17517,7.24161 16.17517,16.1747z', {
rotation: 0, // 顺时针旋转40度
fillColor: 'green',
fillOpacity: 0.8,
strokeColor: '#555',
strokeWeight: 3 // 线宽
});
const iconForwardClosedArrow = new BMap.Symbol(BMap_Symbol_SHAPE_FORWARD_CLOSED_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 0, // 顺时针旋转30度
fillColor: 'red',
fillOpacity: 0.8
});
const iconBackwardClosedArrow = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_CLOSED_ARROW, {
scale: 5,
strokeWeight: 1,
rotation: 180,
fillColor: 'gold',
fillOpacity: 0.8
});
const iconShapePoint = new BMap.Symbol(BMap_Symbol_SHAPE_POINT, {
scale: 2, // 图标缩放大小
fillColor: "orange", // 填充颜色
fillOpacity: 0.8, // 填充透明度
});
return (
<>
setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}


);
}

const Demo = () => (


export default Demo;
`

$3

marker, setMarker, type, setType

`jsx mdx:preview
import React from 'react';
import { useRef, useEffect, useState } from 'react';
import { Provider, APILoader, useMap, useMarker } from '@uiw/react-baidu-map';

const Example = () => {
const divElm = useRef(null);
const { setContainer, map } = useMap({ widget: ['GeolocationControl', 'NavigationControl'], zoom: 8 });
const { setType, marker } = useMarker({ map, position: { lng: 121.444017, lat: 31.237787 } });
useEffect(() => {
if (divElm.current && !map) {
setContainer(divElm.current);
}
});
return (
<>
setType('red2')}>设置 red2
setType('loc_blue')}>设置 loc_blue
marker.setPosition(new BMap.Point(121.497197, 31.232847))}>设置坐标点
marker.setAnimation(2)}>设置动画
marker.setAnimation(null)}>取消动画