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. Selenium WebDriver-判断页面中某一元素是否已经显示，通常用于断言

    判断界面中某一元素是否已经呈现,多用于断言,代码如下: #encoding=utf-8 import unittest import time from selenium import webdriv ...

  2. Wannafly挑战赛9

    链接:https://www.nowcoder.com/acm/contest/71/A来源:牛客网 找一找 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 262144K,其他语言5 ...

  3. Map容器——TreeMap及常用API,Comparator和Comparable接口

    TreeMap及常用API ①   TreeMap类通过使用红黑树实现Map接口; ②   TreeMap提供按排序顺序存储键/值对的有效手段,同时允许快速检索; ③   不像散列(HashMap), ...

  4. 九度oj 题目1080：进制转换

    题目描述: 将M进制的数X转换为N进制的数输出. 输入: 输入的第一行包括两个整数:M和N(2<=M,N<=36). 下面的一行输入一个数X,X是M进制的数,现在要求你将M进制的数X转换成 ...

  5. Common JS、AMD、CMD和UMD的区别

    一.CommonJS 1.CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API.它的终极目标是提供一个类似Python,Ruby和Java标准库.CommonJs 是服务器 ...

  6. POJ-1190 生日蛋糕 NOI99

    深搜+几个剪枝. 貌似搜索顺序也挺重要的...我不知是不是因为这个然后Tle了好久... #include <cstdio> #include <iostream> #incl ...

  7. P1266 速度限制 (最短路,图论)

    题目链接 Solution 在最短路转移的时候在队列或者堆中记录状态为 \(f[u][v]\) 代表上一个节点为 \(u\) ,速度为 \(v\) . 然后按部就班转移即可... Code #incl ...

  8. 【THUWC2017】在美妙的数学王国中畅游（bzoj5020）

    我数学是真的菜!! 清华光用数学知识就把我吊起来打,我还是太菜了 题解 如果每座城市的 $f$ 都是 $3$,维护一下树的路径上的 $\sum a,\space \sum b$ 即可. 其实就是维护一 ...

  9. bzoj 2798 [Poi2012]Bidding 博弈论+dp

    题目大意 A和B两个人在玩一个游戏,这个游戏是他们轮流操作一对整数(x,y). 初始时(x,y)=(1,0),可以进行三种操作: 将(x,y)变成(1,x+y). 将(x,y)变成(2x,y). 将( ...

  10. linux内核中打印栈回溯信息 - dump_stack()函数分析【转】

    转自:http://blog.csdn.net/jasonchen_gbd/article/details/45585133 版权声明:本文为博主原创文章,转载请附上原博链接.   目录(?)[-] ...