百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/java script" src="http://api.map.baidu.com/api?v=2.0&ak=你获取的秘钥"></script>,然后就可以使用脚本中引入的BMap对象去调用各种API了
我遇到的问题
我在入口文件——index.html引入上面那段脚本后,而在另外一个JS文件里访问BMap时候报错了,提示BMap is not defined,
我解决问题的思路
1.到github上找一找有没有开源的SDK(如果有的话通过npm install 安装好依赖包,然后我就可以通过require或import 的方式引入BMap了)——失败,根本就没有开源的依赖包
2.通过require或import直接引入http地址,如require('http..../*上面那个script的地址*/')——失败,require或import只能直接引入本地的资源文件,不能直接引入外部的
3.把BMap绑到Window对象上实现跨文件访问——成功!(能实现但不推荐,为了实现而实现)
4.通过webpack输出对象中的externals属性实现require的访问——成功!(推荐做法)
重现问题:
我的目录:
我的index.html长这样:
/*剩下的部分自己想象*/
<script type="text/java script" src="http://api.map.baidu.com/api?v=2.0&ak=我的的秘钥"></script>
/*剩下的部分自己想象*/
我的test/index.js长这样:
import React from 'react'
class Test extends React.Component{
componentDidMount () {
var map = new BMap.Map("allmap")
}
render () {
return (<div id='allmap'></div>)
}
}
然而渲染Test时却报了错:
一个事实摆在眼前:
以模块化的方式构建应用时,在JS模块中是不能够直接访问入口文件中的变量的,那么我们又该如何在某个JS文件中导入入口HTML文件中的变量呢?
或者说在这个例子中,我们如何能够在test/index.js中取得HTML中引入的脚本中的BMap对象呢?
可能许多同学会想:就用export/import嘛!但直接在HTML文件中export变量显然并不是什么合理的做法
解决方法
方法一:用window对象保存BMap变量,实现HTML文件和JS文件间的变量传递
在引入百度地图的脚本下再加入这一段脚本:
<script type="text/java script" src="http://api.map.baidu.com/api?v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>
<script>
window.BMap = BMap
</script>
没错,就是把BMap对象保存到全局可访问的window对象中
当要使用BMap的时候这样用:
var BMap = window.BMap//取出window中的BMap对象
var map = new BMap.Map("allmap"); // 创建Map实例
//通过map调用API
例子如下:
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.setC