React百度地圖開發

導入相關依賴

“@uiw/react-baidu-map”: “^1.2.1”

cnpm install @uiw/react-baidu-map --save
// 或
npm install @uiw/react-baidu-map --save

0.申請私鑰

在這裏插入圖片描述

image-20191119171320163.png

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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章