在React中使用百度地图

1.前端搭建脚手架

npm install -g create-react-app

2.创建项目

创建项目 create-react-app  项目名称
配置config npm run eject //可省略
启动项目 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
        }
      ]
    ]
  },

基础页面布局

基础工作做好后，下面开始正式的地图使用

获取百度地图api:https://api.map.baidu.com

 在public/index.html引入

<script type="text/javascript" src="// https://api.map.baidu.com/api?v=3.0&ak=你申请的AK"></script>

react使用BMap

重点 重点！！！！ 如果直接就使用

let map =new BMap.Map("allmap");

就会报错

解决方法:

在config/webpack.config.dev.js中

module.exports = {
 externals:{
    'BMap':'BMap',
    },
}

然后在你要使用的jsx中加入

import BMap from 'BMap';

地图使用demo展示

地图展示

src/components/bmap/mapSample/BasicMapView.jsx

导入BMap

import BMap from 'BMap';

地图展示 现在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);     //开启鼠标滚轮缩放
    }

会报错

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";