React中引入百度地图API 避坑

最新推荐文章于 2024-06-27 21:30:42 发布

白桃与猫

最新推荐文章于 2024-06-27 21:30:42 发布

阅读量1k

点赞数

分类专栏：踩坑日记文章标签： react.js javascript

本文链接：https://blog.csdn.net/qq_52395343/article/details/121068946

版权

踩坑日记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文讲述了在React应用中遇到'BMap is not defined'问题的解决过程，涉及全局变量访问、地图容器元素设置及常见陷阱。作者分享了如何正确引入BMap API、使用window.BMap并确保地图容器尺寸，避免了常见的开发误区。

摘要由CSDN通过智能技术生成

‘BMap’ is not defined

在这里插入图片描述

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

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

在这里插入图片描述

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

正确的写法

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

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

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

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>
        )
    }
}