当react框架遇上百度地图
我遇到的问题
我解决问题的思路

/*剩下的部分自己想象*/
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=我的的秘钥"></script>
/*剩下的部分自己想象*/
import React from 'react' class Test extends React.Component{
componentDidMount () {
var map = new BMap.Map("allmap")
}
render () {
return (<div id='allmap'></div>)
}
}


解决方法
方法一:用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>
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')
)

方法二.通过webpack的externals加载BMap使它可以通过require或import引入
module.exports = {
/*此处省略了entry,output,modules等配置*/
externals:{
'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的具体作用

百度地图新手(尤其是用react的)容易犯的错误及其解决方式
1.忘记写< div id= 'allmap' >< /div >这个元素

2.在渲染前就执行了 var map = new BMap.Map("allmap")
render () {
var map = new BMap.Map("allmap"); // 创建Map实例
return (<div id='allmap' />)
)
}
class BaiduMap extends React.Component {
componentDidMount () {
var map = new BMap.Map("allmap"); // 创建Map实例
}
render () {
return <div id='allmap' />
)
}
render () {
return <div id='allmap' style={{width:'100%',height:'100px'}} />
}
一封反馈给百度地图的工作者们的信件


当react框架遇上百度地图的更多相关文章
- 【react】当react框架遇上百度地图
百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...
- MUI框架-13-使用百度地图 API(图文教程)
MUI框架-13-使用百度地图 API(图文教程) 后面有实例,转载请注明出处 一.申请百度地图权限 1.打开 百度地图开放平台:http://lbsyun.baidu.com/apiconsole/ ...
- react项目结合echarts,百度地图实现热力图
一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...
- 同步和异步概念(由DZW前端框架引发的百度地图api无法加载问题总结)
首先概念: 在计算机领域,同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去:异步是指进程不需要一直等下去,而是继续 ...
- 在Vue框架中使用百度地图
1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...
- react项目中引入百度地图打包报错问题
一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...
- 百度地图用ip获取当前位置的经纬度(高精度)
步骤比较简单先上百度地图API官网,申请一个应用AK(访问凭据):查看一下高进度定位的API,看看是否都符合要求下面直接上代码 /** * 根据ip获取地理坐标 * @param ip * @retu ...
- 百度地图在web中的使用(一)
百度地图在web中的使用(js) 背景:在公司做一个地理位置的自定义字段,需要用到地图来获取经纬度和地址,在这选择了百度地图 准备工作 注册百度地图开发者,创建应用获取key http://lbsyu ...
- html5定位并在百度地图上显示
在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...
随机推荐
- oracle表空间扩容
oracle在使用中会发现,表空间不足的情况:以下介绍了如何1.查询表空间使用率.剩余量:2.如何扩展表空间容量: 1.表空间容量指标查询 SELECT TABLESPACE_NAME "表 ...
- Winform 使用DotNetBar 根据菜单加载TabControl
winform 如何使用TabControl 控件来做winform界面框架? 这样的效果: 首先菜单的窗口展示的承载器为TabControl 控件,这个控件本身包含多页面预览和页面初始化. 如图所示 ...
- C语言学习的第一章
首先,学习编写程序要先知道什么是程序,我们为什么要写程序? 程序就是为了让计算机执行某些操作或解决某个问题而编写的一系列有序指令的集合.程序里有很多算法,算法是解决问题的具体方法和步骤,就像我们想要得 ...
- macOS 下配置 MAMP 开发环境(Mac + Apache + Mysql + PHP)
macOS 中已经内置了 PHP.Python.Ruby.Perl 等常用的脚本语言,以及 Apache HTTP 服务器,所以使用起来非常方便.本文以最新的 macOS Sierra 10.12 配 ...
- 在C#中使用类golang信道编程(一)
BusterWood.Channels是一个在C#上实现的信道的开源库.通过使用这个类库,我们可以在C#语言中实现类似golang和goroutine的信道编程方式.在这里我们介绍3个简单的信道的例子 ...
- vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
- 谷歌统计使用代码部署和事件API使用
谷歌统计代码部署和API使用 1.注册谷歌账号 要使用GA,必需先成为GOOGLE的注册用户,如果没有请去注册.当然,你有GMAIL邮箱就可以.邮箱就是帐户名. 2.开启Google Analytic ...
- Oracle清除数据库中长时间占用资源的非活动的会话
1.启动资源计划 alter system set resource_limit=true scope=spfile; 2.设置非活动回话十五分钟断开,释放资源 alter profile defau ...
- zabbix安装配置
实验环境 主机名 操作系统版本 IP地址 安装软件 console CentOS 7.0 114.55.29.246 Httpd.Nginx.MySQL.Zabbix log1 CentOS 7.0 ...
- Linux文件属性及如何修改文件属性
ls -al:显示文件的文件名与相关属性并列出所有文件详细的权限与属性 dr-xr-x---. 7 root root 4096 Apr3 12:31 ...