React中引入百度地图API 避坑

‘BMap’ is not defined

原因: React脚手架中全局变量都要用window去访问
解决: BMap改成window.BMap访问, 或者将BMap从window中解构出来

BMap前加了window, 页面还是一片空白

原因: 没有给地图容器元素设置宽高
解决: 给地图容器元素设置宽高

正确的写法

1. 在public / index.html 中引入百度地图API文件

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

1. 在组件中创建地图容器元素、初始化实例

import React from "react"
import './index.scss'
export default class Map extends React.Component
{
    componentDidMount()
    {
        // React脚手架中全局变量都要用window去访问
        //const BMap = window.BMap 这样写也可以
        const {BMap} = window
        // 初始化地图实例
        const map = new BMap.Map("container")
        // 设置中心点
        const point = new BMap.Point(116.404, 39.915);
        // 地图初始化，同时设置地图展示级别
        map.centerAndZoom(point, 15);
    }
    render()
    {
        return (
            <div className="map">
                {/* 地图容器元素 */}
                <div id="container" style={{width:'800px',height:'800px'}}/>
        </div>
        )
    }
}

容易踩坑的地方:

1. BMap访问前要加window
2. 定义地图容器元素时用id ,不是类名
3. 没有给地图容器元素设置宽高

很幸运, 这三个地方我都踩到了