react-----简单使用百度地图

使用百度地图需要申请密钥

1.第一步 申请密钥 （进入下面的网站查看详情）

https://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

 

2.第二步 添加script 标签

// 在 public/index.html 中添加
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的密钥（详情看第一步）"></script>

 

3.第三步 初始化地图

import React from "react";


import "./index.scss";



// 解决脚手架中全局变量访问的问题
const BMap = window.BMap;



class Map extends React.Component {
  componentDidMount() {
    this.getMap();
  }



  getMap = () => {
    // 创建地图实例
    var map = new BMap.Map("container");



    // 创建点坐标
    var point = new BMap.Point(116.404, 39.915);



    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true);
  };



  render() {
    return (
      // 父容器高度都要设置
      <div className="map">
        <div id="container" style={{ width: "100%", height: "100%" }}></div>
      </div>
    );
  }
}



export default Map;