react框架遇上百度地圖怎麼辦？
- 零下一度原創
- 2017-06-26 13:38:002982瀏覽
百度地圖官方文件的使用指導是這樣說的：在頁面中引入，然後就可以使用腳本中引入的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/javascript" 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/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的大二学生
以上是react框架遇上百度地圖怎麼辦？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn