‘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 ,不是类名没有给地图容器元素设置宽高
很幸运, 这三个地方我都踩到了