阅读 4418

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

搞定!

关注下面的标签,发现更多相似文章
评论