在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";
复制代码

搞定！