react 自定义百度地图（BMap）组件

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;

BMap

react 自定义 百度地图（BMap）组件

react 自定义百度地图（BMap）组件