React中引入百度地图API 避坑

‘BMap’ is not defined

原因:React脚手架中全局变量都要用window去访问

解决:BMap改成window.BMap访问, 或者将BMap从window中解构出来

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

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

解决:给地图容器元素设置宽高

正确的写法

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

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

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

import React from "react"import './index.scss'export default class Map extends ponent{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>)}}

容易踩坑的地方:

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

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