The usage instructions of Baidu Map official document say this: Introduce , then you can use the BMap object introduced in the script to call various APIs
The problem I encountered:
After I introduced the above script in the entry file - index.html, when I accessed BMap in another JS file, an error was reported, prompting that BMap is not defined,
My ideas for solving the problem:
1. Go to github Find out if there is an open source SDK (if there is, install the dependency package through npm install, and then I can introduce BMap through require or import) ——Failed, there is no open source dependency package at all
2. Directly introduce the http address through require or import, such as require('http..../*The address of the above script*/')—— Failure, require or import can only directly introduce local resource files, and cannot directly introduce external
3. Bind BMap to the Window object to achieve cross-file access - success! (It can be implemented but not recommended, implemented for the sake of implementation)
4. Implement require access through the externals attribute in the webpack output object ——Success ! (Recommended practice)
Reproduce the problem:
My directory:
##My index.html looks like this:
/*剩下的部分自己想象*/<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的的秘钥"></script>/*剩下的部分自己想象*/
My test/index.js looks like this:
import React from 'react'
class Test extends React.Component{
componentDidMount () { var map = new BMap.Map("allmap")
}
render () {return (<div id='allmap'></div>) }
}
However, an error was reported when rendering Test:
A fact In front of you:
When building an application in a modular manner, you cannot directly access the variables in the entry file in the JS module, So How do we import the variables in the entry HTML file into a JS file?
#Or in this example, how can we obtain the BMap object in the script introduced in HTML in test/index.js?
Maybe many students will think: Just use export/import! But exporting variables directly in HTML files is obviously not a reasonable approach
Method 1: Save BMap with Window object Variables, realizing variable transfer between HTML files and JS files:在引入百度地图的脚本下再加入这一段脚本:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>
<script> window.BMap = BMap</script>
没错,就是把BMap对象保存到全局可访问的window对象中
当要使用BMap的时候这样用:
BMap = window.BMap map = BMap.Map("allmap");
例子如下:
import React from 'react'import ReactDOM from 'react-dom'class BaiduMap extends React.Component {
componentDidMount () { var BMap = window.BMap var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设 置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放}
render () { return (<div>
<div
id='allmap' style={{
width:'100vw',
height:'100vh' }} />
</div> )
}
}
ReactDOM.render(<BaiduMap />,
document.getElementById('root')
)
demo:
方法二.通过webpack的externals加载BMap使它可以通过require或import引入
在webpack.config.js中
module.exports = {/*此处省略了entry,output,modules等配置*/
externals:{ 'BMap':'BMap'
},
}
在使用到BMap的时候,这样引入:
import BMap from 'BMap'var map = new BMap.Map("allmap"); // 创建Map实例//通过map调用API
例子:
import React from 'react'import ReactDOM from 'react-dom'import BMap from 'BMap'class BaiduMap extends React.Component {
componentDidMount () { var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放}
render () { return (<div>
<div
id='allmap'style={{
width:'100vw',
height:'100vh' }} />
</div> )
}
}
ReactDOM.render( <BaiduMap />,
document.getElementById('root')
)
webpack的externals的具体作用我概括为两点:
1.写入externals中的依赖是不会被打包进最后的bundle里面的
2.虽然它不会被打包,但在程序运行的时候你仍然能通过模块化的方式去引入这些依赖,如commonJS,AMD,ES6的import等
(原文:Prevent bundling of certain imported packages and instead retrieve these external dependencies at runtime.)
demo同上:
百度地图新手(尤其是用react的)容易犯的错误及其解决方式:
1.忘记写这个元素(id不一定要是allmap,只要和 new BMap.map(参数)里的字符串参数相同便可)
然后控制台就会报:TypeError: Cannot read property 'gc' of undefined的错误
2.你写入了,但还是报了TypeError: Cannot read property 'gc' of undefined的错误,你可能犯了一个原生JS码农不太可能会犯但是react码农可能会犯的错误:你在渲染前就执行了 var map = new BMap.Map("allmap");这一行代码
例如:
render () { var map = new BMap.Map("allmap"); // 创建Map实例
return (<div id='allmap' />) )
}
解决办法:在渲染后才执行var map = new BMap.Map("allmap"); 例如将初始化map的代码放入组件类的
componentDidMount ()钩子函数中(这个函数将在组件被初次渲染完毕后调用)
例如:
class BaiduMap extends React.Component {
componentDidMount () { var map = new BMap.Map("allmap"); // 创建Map实例}
render () { return <div id='allmap' /> )
}
3.你写入了,控制台也没有报错,但是你就是看!不!到!地!图!
这多半是你没有给加上宽高,百度地图的API是不会给你的div加宽高的,所以height默认是0就是0
解决方法:给目标地图div加上宽高(严格地说是高,宽默认为width:auto)
render () {return <div id='allmap' style={{width:'100%',height:'100px'}} />
}
为此,我写了一封反馈的信件给百度地图的工作者们,目前在等待回应中(希望能有所回应吧)
以下为详细内容:
亲爱的百度地图开发者您好,作为一名react框架开发者,我在入门百度地图API时遇到困难——我不知道如何在模块化JS中使用BMap的API(问题现已解决)。因为你们只提供了原生JS下的入门指导,而没有任何关于模块化JS编程下的指导内容。这对于一些框架新手来说确实有些难以下手
我遇到的问题是:在引入携带AK的script的前提下,在一个JS模块文件(不是入口文件)中使用BMap报错:"error! BMap is not defined!"
我的解决法是通过在Webpack输出对象中的externals属性中加入BMap:"BMap",然后通过在对后在对应的JS页面中通过Window.BMap取得。
希望你们能够提供更为详细的操作指导,例如webpack下BMap的用法。这将让你们的产品变得更好。
以上 —— 某个爱好javaScript的大二学生
The above is the detailed content of What should I do if the react framework meets Baidu Maps?. For more information, please follow other related articles on the PHP Chinese website!