使用React-BMapGL出现“BMapGL is not defined“ 错误
项目场景:
在React项目中使用百度地图API
问题描述
在React项目中使用百度地图API时出现了 “BMapGL is not defined” 错误。
以下为百度地图给出的快速入门:
引入脚本
首先,需要在你的index.html
模板页面头部加载百度地图JavaScript API
代码,密钥可去百度地图开放平台官网申请。
<script type="text/javascript" src="//api.map.百度.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
然后,使用npm
方式安装react
组件库,然后通过es
模块加载
npm install react-bmapgl --save
代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
class App extends React.Component {
render() {
return <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
<Marker position={{lng: 116.402544, lat: 39.928216}} />
<NavigationControl />
<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
</Map>
}
}
export default App;
原因分析:
异步加载
解决方案:
按照官方的异步加载方法修改代码。使用
MapApiLoaderHOC
高阶组件,实现异步加载的方式。
import React from 'react';
import ReactDOM from 'react-dom';
import {Map, Marker, NavigationControl, InfoWindow} from 'react-bmapgl';
class App extends React.Component {
render() {
return <Map center={{lng: 116.402544, lat: 39.928216}} zoom="11">
<Marker position={{lng: 116.402544, lat: 39.928216}} />
<NavigationControl />
<InfoWindow position={{lng: 116.402544, lat: 39.928216}} text="内容" title="标题"/>
</Map>
}
}
export default MapApiLoaderHOC({ak: '您的密钥'})(App);
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfgafg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01