在React中使用百度地圖api的一系列demo

github地址：github.com/shenglifen/…

本次更新

• 地圖實例：地圖展現

前言

由於以前工做的關係，會頻繁的使用各類地圖，例如百度地圖，高德地圖，谷歌地圖等。因此想整理一下，寫一個在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

打開 localhost:3000咱們會看見上圖，而後咱們在此基礎上進行改造。

（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 報錯了

BMAP_NORMAL_MAP，'BMAP_HYBRID_MAP' is not defined 可是打印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";
複製代碼

搞定！