導入相關依賴
“@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元素稱爲控件。百度控件文檔 |
string[] /object[] |
[] |
center | 定位, 可使用如 上海市青浦區 的地區字符串,也可以使用對象如 {lng: 121.424333, lat: 31.228604} 表示經緯度。百度拾取座標系統 |
Point,String | 上海市 |
autoLocalCity | 設爲 true , IP定位獲取當前城市,進行自動定位 |
boolean | - |
zoom | 縮放等級,如果 center 類型爲 Point 時,zoom必須賦值,範圍 3-19 級, 若調用高清底圖(針對移動端開發)時,zoom 可賦值範圍爲 3-18 級。 如果center類型爲字符串時,比如“北京”,zoom可以忽略,地圖將自動根據 center 適配最佳 zoom 級別 |
number | - |
minZoom | 地圖允許展示的最小級別 | number | - |
maxZoom | 地圖允許展示的最大級別 | number | - |
mapType | 地圖類型 | MapType | BMAP_NORMAL_MAP |
enableHighResolution | 是否啓用使用高分辨率地圖。在iPhone4及其後續設備上,可以通過開啓此選項獲取更高分辨率的底圖,v1.2,v1.3版本默認不開啓,v1.4 默認爲開啓狀態 | boolean | - |
enableAutoResize | 地圖允許展示的最大級別 | boolean | true |
enableMapClick | 是否開啓底圖可點功能 | boolean | true |
enableDragging | 啓用地圖拖拽,默認啓用 | boolean | - |
enableScrollWheelZoom | 啓用滾輪放大縮小,默認禁用 | boolean | - |
enableDoubleClickZoom | 啓用雙擊放大,默認啓用 | boolean | true |
enableInertialDragging | 啓用地圖慣性拖拽,默認禁用 | boolean | - |
enableContinuousZoom | 啓用連續縮放效果,默認禁用 | boolean | - |
enablePinchToZoom | 啓用雙指操作縮放,默認啓用 | boolean | true |
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 | 必填 設置標註的地理座標。百度拾取座標系統 |
Point |
- |
animation | 此常量表示標註的動畫效果, 1 墜落動畫,2 跳動動畫。 |
number |
- |
type | 標點類型,默認自定義標點 location , end , start , simple_red , simple_blue , loc_blue , loc_red , dot_red , dot_blue', 'red1 , red2 , red3 , red4 , red5 , red6 , red7 , red8 , red9', 'blue1 , blue2 , blue3 , blue4 , blue5 , blue6 , blue7 , blue8 , blue9 。 |
string |
- |
offset | 標註的位置偏移值 | Size |
- |
enableMassClear | 是否在調用 map.clearOverlays 清除此覆蓋物 |
boolean |
true |
icon | 標註所用的圖標對象 | Icon |
- |
enableDragging | 是否啓用拖拽 | boolean |
false |
enableClicking | 是否響應點擊事件 | boolean |
true |
enableMassClear | 允許覆蓋物在map.clearOverlays方法中被清除 | boolean |
true |
raiseOnDrag | 拖拽標註時,標註是否開啓離開地圖表面效果。 | boolean |
false |
draggingCursor | 拖拽標註時的鼠標指針樣式。此屬性值需遵循CSS的cursor屬性規範 | string |
- |
rotation | 是否響應點擊事件 | number |
- |
shadow | 陰影圖標 | Icon |
- |
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>