导入相关依赖
“@uiw/react-baidu-map”: “^1.2.1”
cnpm install @uiw/react-baidu-map --save
// 或
npm install @uiw/react-baidu-map --save
0.申请私钥
1.地图引入
Map 的父组件必须具有宽度和高度；
import { Map, APILoader } from '@uiw/react-baidu-map';
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
<Map />
</APILoader>
</div>
一、Map的使用
2.Map的API
props属性
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| widget | 百度地图上负责与地图交互的UI元素称为控件。 | | |
| center | 定位, 可使用如 | Point,String | |
| autoLocalCity | 设为 | boolean | - |
| zoom | 缩放等级，如果 | number | - |
| minZoom | 地图允许展示的最小级别 | number | - |
| maxZoom | 地图允许展示的最大级别 | number | - |
| mapType | 地图类型 | MapType | |
| enableHighResolution | 是否启用使用高分辨率地图。在iPhone4及其后续设备上，可以通过开启此选项获取更高分辨率的底图，v1.2,v1.3版本默认不开启，v1.4 默认为开启状态 | boolean | - |
| enableAutoResize | 地图允许展示的最大级别 | boolean | |
| enableMapClick | 是否开启底图可点功能 | boolean | |
| enableDragging | 启用地图拖拽，默认启用 | boolean | - |
| enableScrollWheelZoom | 启用滚轮放大缩小，默认禁用 | boolean | - |
| enableDoubleClickZoom | 启用双击放大，默认启用 | boolean | |
| enableInertialDragging | 启用地图惯性拖拽，默认禁用 | boolean | - |
| enableContinuousZoom | 启用连续缩放效果，默认禁用 | boolean | - |
| enablePinchToZoom | 启用双指操作缩放，默认启用 | boolean | |
| enableKeyboard | 启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级 | boolean | - |
| ready | 地图实例加载完成执行事件 | (bmap: typeof BMap, map: BMap.Map): void | - |
3.小工具控件
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="azHOkZP2BALr1pYARZRFPQa1G5dNG7HS">
<Map
center={{lng: 113.755633, lat: 23.026523}}
widget={[
'GeolocationControl',
{
name: 'OverviewMapControl',
options: {
isOpen: true,
}
},
{
name: 'NavigationControl',
options: (BMap) => {
return {
offset: new BMap.Size(150, 5),
showZoomInfo: false,
enableGeolocation: true,
}
}
}
]}
/>
</APILoader>
</div>
| 控件 | 类名 | 简介 |
|---|---|---|
| 抽象基类 | Control | 所有控件均继承此类的方法、属性。通过此类您可实现自定义控件 |
| 平移缩放控件 | NavigationControl | PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方 |
| 缩略地图 | OverviewMapControl | 默认位于地图右下方，是一个可折叠的缩略地图 |
| 比例尺 | ScaleControl | 默认位于地图左下方，显示地图的比例关系 |
| 地图类型 | MapTypeControl | 默认位于地图右上方 |
| 版权 | CopyrightControl | 默认位于地图左下方 |
| 定位 | GeolocationControl | 针对移动端开发，默认位于地图左下方 |
4.地图（滚轮）的放大缩小
版本："@uiw/react-baidu-map": "^1.2.1",
//注意：版本1.0.0不可用
<Map>
enableScrollWheelZoom={true}
</Map>
5.Map的综合使用
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="azHOkZP2BALr1pYARZRFPQa1G5dNG7HS">
<Map
ready={(bmap, map) => {
console.log('准备好了！', map);
console.log("地图加载完毕");
// 启用滚轮放大缩小，默认禁用
// map.enableScrollWheelZoom();
}}
// 滚轮滑动放大缩小地图
enableScrollWheelZoom
// 缩放等级
zoom={17}
// 自定定位当前城市
// autoLocalCity
center={{ lng: 118.460977, lat: 31.227906 }}
// 添加地图控件
widget={[
'GeolocationControl',
{
name: 'OverviewMapControl',
options: {
isOpen: true,
}
},
{
name: 'NavigationControl',
options: (BMap) => {
return {
offset: new BMap.Size(20, 5),
showZoomInfo: false,
enableGeolocation: true,
}
}
}
]}
/>
</APILoader>
</div>
二、Marker 点标注组件
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| position | | | - |
| animation | 此常量表示标注的动画效果, | | - |
| type | 标点类型，默认自定义标点 | | - |
| offset | 标注的位置偏移值 | | - |
| enableMassClear | 是否在调用 | | |
| icon | 标注所用的图标对象 | | - |
| enableDragging | 是否启用拖拽 | | |
| enableClicking | 是否响应点击事件 | | |
| enableMassClear | 允许覆盖物在map.clearOverlays方法中被清除 | | |
| raiseOnDrag | 拖拽标注时，标注是否开启离开地图表面效果。 | | |
| draggingCursor | 拖拽标注时的鼠标指针样式。此属性值需遵循CSS的cursor属性规范 | | - |
| rotation | 是否响应点击事件 | | - |
| shadow | 阴影图标 | | - |
| title | 鼠标移到 marker 上的显示内容 |
6.普通点标注
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FlRQcdaX-1575338837138)(…/…/Image/markers.png)]
<Row>
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="azHOkZP2BALr1pYARZRFPQa1G5dNG7HS">
<Map
widget={['NavigationControl']}
zoom={13}
// center="上海"
center={{ lng: 121.460977, lat: 31.227906 }}
>
<Marker position={{ lng: 121.411535, lat: 31.222965 }} animation={2} />
<Marker position={{ lng: 121.465145, lat: 31.241245 }} />
<Marker position={{ lng: 121.466008, lat: 31.220001 }} animation={1} 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>
</Row>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OfwFV8r5-1575338837139)(…/…/Image/image-20191121142958536.png)]
7.自定义标点
const icon = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157));
可能会出现报错BMap is undefined
在public文件夹下面的index.html增加下面代码:
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=hhGvYrSziBLVtisfMfUK4GpTdCdqQHMy"></script>
<script>
window.BMap = BMap
</script>
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="azHOkZP2BALr1pYARZRFPQa1G5dNG7HS">
<Map
widget={['NavigationControl']}
zoom={13}
center={{ lng: 121.460977, lat: 31.227906 }}
>
<Marker icon={icon} position={{ lng: 121.411535, lat: 31.222965 }} animation={2} />
</Map>
</APILoader>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jCVmjs5V-1575338837143)(…/…/Image/image-20191121181827071.png)]
8.可拖拽点，并获取拖拽后的位置
添加拖拽完成事件
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="azHOkZP2BALr1pYARZRFPQa1G5dNG7HS">
<Map
enableScrollWheelZoom
widget={['NavigationControl']}
zoom={13}
center={{ lng: 121.460977, lat: 31.227906 }}
>
<Marker
ref={(props) => {
if (props && props.marker) {
// console.log('marker::', props.marker, props.map, props.BMap);
// props.marker.removeEventListener('dragend', dragendHandle)
props.marker.addEventListener('dragend', (e)=>{
console.log(e.point);
})
}
}}
title={"潘顾昌"}
icon={icon}
position={{ lng: 121.411535, lat: 31.222965 }}
// animation={2}
enableDragging
/>
</Map>
</APILoader>
</div>
9.点击地图根据坐标标注
@Debounce(300)
@Bind()
event(e, props, icon){
const BMap = props.BMap;
let marker = new BMap.Marker(e.point,{icon});
marker.enableDragging();
props.map.addOverlay(marker);
}
const icon = new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/fox.gif', new BMap.Size(300, 157));
<Row>
<div style={{ width: '100%', height: '300px' }}>
<APILoader akay="azHOkZP2BALr1pYARZRFPQa1G5dNG7HS">
<Map
ref={(props) => {
if (props && props.map) {
props.map.addEventListener('click',
(e)=> this.event(e, props, icon)
);
}
}}
enableScrollWheelZoom
widget={['NavigationControl']}
zoom={13}
center={{ lng: 121.460977, lat: 31.227906 }}
>
</Map>
</APILoader>
</div>
</Row>
}}
enableScrollWheelZoom
widget={['NavigationControl']}
zoom={13}
center={{ lng: 121.460977, lat: 31.227906 }}
>
</Map>
</APILoader>
</div>
</Row>