1.html 页面引入 相关js

public/index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">

    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

    <title>React App</title>

    <link href="lib/baidumapv2/css/baidu_map_v2.css" rel="stylesheet" type="text/css"/>

    <script src="lib/baidumapv2/baidumap_offline_v2_load.js"></script>

    <script src="lib/baidumapv2/tools/TextIconOverlay_min.js"></script>

    <script src="lib/baidumapv2/tools/MarkerClusterer_min.js"></script>

    <script>

      // 实例化 百度地图

      window.BMap = BMap;

      window.BMapLib = BMapLib;

    </script>

  </head>

  <body>

    <div id="root"></div>

  </body>

</html>

2.创建 BMap 组件

src/components/BMap/index.js

/**

 * 百度地图 组件

 */

import React,{ PureComponent } from 'react';

// 获取屏幕宽高

const width = document.documentElement.clientWidth + 'px';

const height = document.documentElement.clientHeight - 95 + 'px';

class BMap extends PureComponent {

  // 构造函数

  constructor(props) {

    super(props);

    this.state = {

      //

    };

  }

  // 生命周期

  componentDidMount () {

    var BMap = window.BMap

    var map = new BMap.Map("allmap"); // 创建Map实例

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别

    map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

    map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的

    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

  }

  render(){

    return (

      <div id='allmap' style={{width:width,height:height}}></div>

    )

  }

}

export default BMap;

.

.

react 自定义 百度地图（BMap）组件的更多相关文章

  1. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  2. 百度地图BMap实现在行政区域内做标注

    使用环境 vue bmap.js element-ui 页面展示 前提步骤 在index中引入百度地图提供的js库 在使用的vue页面中实例化地图 <!-- 给id随便起给名字 --> & ...

  3. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  4. echarts3.8.4实现城市空气质量(结合百度地图bmap.js，小航哥)

    (小航哥自己实现的)为了事先地图效果,需要以下准备: 用百度地图作为地图,需要 1.bmap.min.js(下载地址https://github.com/ecomfe/echarts ,GitHub上 ...

  5. 【React】 百度地图API

    百度地图 开发文档 :http://lbsyun.baidu.com/index.php?title=jspopular 调用接口 需要 内置加载一个 百度api文件    使用自己的ak  申请一个 ...

  6. vue引入百度地图 --BMap is not defined ，eslint BMap报错

    在mounted初始化地图的时候,因为异步问题会导致BMap is not defined,也就是百度的api还没完全引入或者加载完成,就已经进行地图初始化了 解决方法: 1.创建一个map.js e ...

  7. 百度地图BMap API实例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. vue引入百度地图api组件封装（根据地址定位）

    Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...

  9. echarts 与 百度地图bmap结合系列： 如何设置地图缩放级别和监听缩放事件

    简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el) // ehcarts加载完成事件 this.myChart.on('finished ...

随机推荐

  1. Python的内存管理、命名规则、3个特性讲解

    理解变量: 变:现实世界中的状态是会发生改变的 量:衡量/记录现实世界中的状态,让计算机能够像人一样去识别世间万物(例如:一个人的身高.体重等这些信息) 为什么要变量: 程序执行的本质就是一系列状态的 ...

  2. Event based Collections

    https://sourceforge.net/p/happy-guys/wiki/Event%20based%20Collections/

  3. 【HNOI2011/bzoj2337】XOR和路径

    第二道高斯消元练习题 题意 一张无向图,从点 $1$ 出发每次随机选一条出边走,走到 $n$ 停止,求经过的所有边权异或和的期望. $n\le 100$ 题解 注意一点,异或和的期望 $≠$ 期望的异 ...

  4. 解决 Springboot中Interceptor拦截器中依赖注入失败

    问题: 在Springboot拦截器Interceptor中使用@Resource依赖注入时,发现运行的时候被注解的对象居然是null,没被注入进去 原配置为: @Configurationpubli ...

  5. Linq技巧4——怎么在.NET 3.5 SP1中伪造一个外键属性

    在.NET 4.0 的EF 中,增加了FK Associations 的功能,但是在.NET 3.5 SP1 中,仅仅支持独立的关联,这意味着FK 栏位不能作为实体的属性来使用,也就是说在使用的时候, ...

  6. LOJ#2303. 「NOI2017」蚯蚓排队

    $n \leq 200000$的$1 \leq a_i \leq 6$的蚯蚓,有三种操作:让一只队头蚯蚓接在一只队尾蚯蚓后面:让一队蚯蚓从某个蚯蚓后面断成两队:问:给个字符串,问他的..算了你们直接看 ...

  7. sublime flatLand 主题

    今天试了下感觉主题不错 记下来备忘. 1.sublime3 package control install  搜索 flatLand 2 安装完成后. 修改 Preferences 文件,通过 Sub ...

  8. 《Vim实用技巧》第2版读书笔记

    学习前的建议: 一.如果你需要一个功能强大的文本编辑器,速度飞快.使用方便.代码补全.编程强大.定制性强,Vim就是你需要的: 二.学习入门曲线陡峭,但是使用后期异常简单,效率超高: 三.号称可以跟上 ...

  9. hdu 1250(大整数)

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  10. 002如何升级 Linux 的内核？

    我们不应该升级 Linux 内核,而是始终使用 rpm 命令来安装新的内核,因为升级内核会让你的 Linux 机器处于一个无法启动的状态.