设为首页 加入收藏

TOP

【react】当react框架遇上百度地图(二)
2017-10-11 13:56:22 】 浏览:10095
Tags:react 框架 遇上 百度 地图
urrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 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.忘记写< div id= 'allmap' >< /div >这个元素

忘记写<div id= 'allmap'></div>这个元素(id不一定要是allmap,只要和 new BMap.map(参数)里的字符串参数相同便可)
然后控制台就会报:TypeError: Cannot read property 'gc' of undefined的错误
解决方法:记得写<div id= 'XXXX'></div>
 

2.在渲染前就执行了 var map = new BMap.Map("allmap")

 
你写入了<div id= 'allmap'></div>,但还是报了TypeError: Cannot read property 'gc' of undefined的错误,你可能犯了一个原生JS码农不太可能会犯但是react码农可能会犯的错误:你在<div id= 'allmap'></div>渲染前就执行了 var map = new BMap.Map("allmap");这一行代码
例如:
render () {
   var map = new BMap.Map("allmap"); // 创建Map实例
   return (<div id='allmap' />)
 )
}

 

解决办法:在渲染<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.你写入了<div id= 'allmap'></div>,控制台也没有报错,但是你就是看!不!到!地!图!
这多半是你没有给<div id= 'allmap'></div>加上宽高,百度地图的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的用法。这将让你们的产品变得更好。
 
以上 —— 某个爱好java script的大二学生

 

首页 上一页 1 2 下一页 尾页 2/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇纯css实现div中未知尺寸图片的垂.. 下一篇纯css实现div中未知尺寸图片的垂..

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目