在React中使用百度地圖api的一系列demo
因為之前工作的關係，會頻繁的使用各種地圖，例如百度地圖，高德地圖，谷歌地圖等。所以想整理一下，寫一個在react中根據不同的需求使用地圖api的各種demo集合，所以先以百度地圖為例。
本文將根據官網顯示的demo列表，一個一個實現在react中的使用方法。文章內容較長，將會持續更新，同時也會在官網提供的列子上根據實際使用加入不同的使用組合。
技術
- React -----> create-react-app 一個facebook官方開發的快速搭建react的腳手架。
- 百度地圖JavaScript API ------->在web端使用的百度地圖api
- antd design----->開箱即用的高質量 React 元件。
（一）前端搭建
1.用facebook官方開發的create-react-app 腳手架搭建一個react前端框架。
(1)全域性安裝 create-react-app
npm install -g create-react-app 複製程式碼
(2)建立專案
create-react-app react-map npm run eject //可省略，只為了看配置 config npm start 複製程式碼
自此專案目錄如下圖
(3) 執行
npm start
我們會看見上圖，然後我們在此基礎上進行改造。
（4）安裝依賴
npm install antd react-router --save
為了使用antd 的時候能夠按需載入，先配置 babel-plugin-import 這是一個用於按需載入元件程式碼和樣式的 babel 外掛
npm install babel-plugin-import --save-dev 複製程式碼
然後在package.json中加入配置
·····省略其他
"babel": {
"presets": [
"react-app"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
},
·····省略其他
複製程式碼
使用裝飾器
npm install --saveDev babel-plugin-transform-decorators-legacy 複製程式碼
然後在package.json中加入配置
·····省略其他
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-decorators-legacy",
[
"import",
{
"libraryName": "antd",
"style": true
}
]
]
},
·····省略其他
複製程式碼
基礎頁面佈局
基礎工作做好後，下面開始正式的地圖使用
（1）獲取百度地圖api，獲取方式網上有很多教程，就不介紹了，如果不想獲取的，可以先用我的key 2NZa1O1V3BHmsDlX9fdomGaO3S5b1AEo （2） 在public/index.html引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2NZa1O1V3BHmsDlX9fdomGaO3S5b1AEo"></script> 複製程式碼
(3)react使用BMap
重點 重點！！！！如果直接就使用
let map =new BMap.Map("allmap");
複製程式碼
會報錯
有兩種解決方式 可以參考 www.cnblogs.com/softidea/p/… 這個就看你的選擇了.
本文選擇的是第二種 在config/webpack.config.dev.js中
module.exports = {
externals:{
'BMap':'BMap',
},
}
複製程式碼
然後在你要使用的jsx中加入
import BMap from 'BMap'; 複製程式碼
成功！！！！
地圖使用demo展示
本文將根據官網顯示的demo列表，一個一個實現在react中的使用方法。文章內容較長，將會持續更新，同時也會在官網提供的列子上根據實際使用加入不同的使用組合。
第一部分 地圖實力
在官網中地圖實力是以下內容
此時我的專案結構如下：
地圖展示
src/components/bmap/mapSample/BasicMapView.jsx
(1)匯入BMap
import BMap from 'BMap'; 複製程式碼
(2)地圖展示 現在render裡面制定地圖id，height,width等資訊
<div style={{width:"100%",height:"100%"}} id={"allmap"}></div>
複製程式碼
然後在componentDidMount中對地圖進行繫結id,複製貼上官網例子
componentDidMount(){
let map =new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地圖,設定中心點座標和地圖級別
//新增地圖型別控制元件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_HYBRID_MAP,//混合地圖
BMAP_NORMAL_MAP//地圖
]}));
map.setCurrentCity("北京");// 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true);//開啟滑鼠滾輪縮放
}
複製程式碼
此時發現emmmmm 報錯了
但是列印console.log(window)後發現window裡面居然有，所以可以專門用一個js儲存這些資料。 在common/BMAP_DATA.js中指定這些引數
export const BMAP_NORMAL_MAP =window.BMAP_NORMAL_MAP; export const BMAP_HYBRID_MAP = window.BMAP_HYBRID_MAP; 複製程式碼
然後在src/components/bmap/mapSample/BasicMapView.jsx中匯入
import {BMAP_HYBRID_MAP, BMAP_NORMAL_MAP} from "../../../common/BMAP_DATA";
複製程式碼
搞定！
