百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" 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/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的时候这样用:
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.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.忘记写< 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的用法。这将让你们的产品变得更好。
 
以上 —— 某个爱好javaScript的大二学生

当react框架遇上百度地图的更多相关文章

  1. 【react】当react框架遇上百度地图

      百度地图官方文档的使用指导是这样说的:在页面中引入<script type="text/javascript" src="http://api.map.baid ...

  2. MUI框架-13-使用百度地图 API(图文教程)

    MUI框架-13-使用百度地图 API(图文教程) 后面有实例,转载请注明出处 一.申请百度地图权限 1.打开 百度地图开放平台:http://lbsyun.baidu.com/apiconsole/ ...

  3. react项目结合echarts,百度地图实现热力图

    一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...

  4. 同步和异步概念(由DZW前端框架引发的百度地图api无法加载问题总结)

    首先概念: 在计算机领域,同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去:异步是指进程不需要一直等下去,而是继续 ...

  5. 在Vue框架中使用百度地图

    1.首先在index.html中引入百度地图 <script type="text/javascript" src="http://api.map.baidu.co ...

  6. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

  7. 百度地图用ip获取当前位置的经纬度(高精度)

    步骤比较简单先上百度地图API官网,申请一个应用AK(访问凭据):查看一下高进度定位的API,看看是否都符合要求下面直接上代码 /** * 根据ip获取地理坐标 * @param ip * @retu ...

  8. 百度地图在web中的使用(一)

    百度地图在web中的使用(js) 背景:在公司做一个地理位置的自定义字段,需要用到地图来获取经纬度和地址,在这选择了百度地图 准备工作 注册百度地图开发者,创建应用获取key http://lbsyu ...

  9. html5定位并在百度地图上显示

    在开发移动端 web 或者webapp时,使用百度地图 API 的过程中,经常需要通过手机定位获取当前位置并在地图上居中显示出来,这就需要用到html5的地理定位功能. navigator.geolo ...

随机推荐

  1. SSH整合总结(xml与注解)

    本人自己进行的SSH整合,中间遇到不少问题,特此做些总结,仅供参考. 一.使用XML配置: SSH版本 Struts-2.3.31 Spring-4.3.5 Hibernate-4.2.21 引入ja ...

  2. Java多线程学习笔记(一)——Thread类中方法介绍

    currentThread():返回代码正在被哪个线程调用. public class CurrentThreadWay { public static void main(String[] args ...

  3. 【转】JDBC学习笔记(1)——JDBC概述

    转自:http://www.cnblogs.com/ysw-go/ JDBC JDBC API是一个Java API,可以访问任何类型表列数据,特别是存储在关系数据库中的数据.JDBC代表Java数据 ...

  4. js错误问题 The operation is insecure.

    问题: 当我使用canvas的ctx.getImageData 方法时,js报错,错误是 The operation is insecure. 解决: 我使用ctx.getImageData获取can ...

  5. git提交如何忽略某些文件

    在使用git对项目进行版本管理的时候,我们总有一些不需要提交到版本库里的文件和文件夹,这个时候我们就需要让git自动忽略掉一下文件. 使用.gitignore忽略文件 为了让git忽略指定的文件和文件 ...

  6. 谈谈web上种图片应用的优缺点

    web中承载信息的主要方式就是图片与文字了,以下就是对一些web图片格式的优缺点进行归纳. 1.GIF GIF图是比较古老的web图片格式之一,可以追溯到1987,几乎所有的浏览器都支持这一种格式,老 ...

  7. bzoj4784 [Zjoi2017]仙人掌

    Description 如果一个无自环无重边无向连通图的任意一条边最多属于一个简单环,我们就称之为仙人掌.所谓简单环即不经过重复的结点的环. 现在九条可怜手上有一张无自环无重边的无向连通图,但是她觉得 ...

  8. 纯HTML课表

    table标签构造课表 table标签常用于制作表格以及简单布局,于是我就玩了下table标签,用table标签也能构造出很漂亮的页面呢,虽然在博客页面加入与实际打开页面稍微有点出入,但还是可以接受的 ...

  9. AngularJS2基本构造

    2.NG2入门 2.1 基本构造 angularjs主要有8个构造快: 模块(module) 组件(component) 模板(template) 元数据(metadata) 数据绑定(data bi ...

  10. 【Windows 10 应用开发】跟随系统主题颜色

    有些时候,希望应用程序中的某些颜色可以与系统的主题颜色相同,并且当系统主题色改变时进行同步. 实现过程并不复杂,主要用到 UISettings 类,它公开一个 GetColorValue 方法,访问这 ...