導入相關依賴
“@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>