使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载

乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然报错了

但是,如何引入呢?

直接在 html 页面用 script 引入,肯定不行,React 是模块化的,在html引入也用不了 Bmap啊

后来查找了一些博客,顿然醒悟,可以通过 webpack 引入外部 js 啊

方法:

  首先引入百度地图API到 html 页面上。注意⚠️引入该文件的位置,最好是在head之间引入

  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

  然后给 webpack 添加配置:external (外部的)

  

react 引入 百度地图API的更多相关文章

  1. 【React】 百度地图API

    百度地图 开发文档 :http://lbsyun.baidu.com/index.php?title=jspopular 调用接口 需要 内置加载一个 百度api文件    使用自己的ak  申请一个 ...

  2. vue引入百度地图api组件封装(根据地址定位)

    Map.vue <template> <div class="Map" :style="{ height: this.height+'px', widt ...

  3. 数据视化Echarts+百度地图API实现市县区级下钻

    开始 这两天公司有个页面需要做数据可视化的展示,数据视化采用的是Echarts+百度地图API做展示,需要用到县级区级下钻的一个联动效果发现网上关于Echarts做到县区级下钻的资料很少,有的话也不是 ...

  4. web开发如何使用百度地图API(一)判断点是否在范围内

    准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...

  5. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  6. Angular 调用百度地图API接口

    Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...

  7. React中使用百度地图API

    今天我们来搞一搞如何在React中使用百度地图API好吧,最近忙的头皮发麻,感觉身体被掏空,所以很久都没来写博客了,但今天我一定要来一篇好吧 话不多说,我们直接开始好吧 特别注意:该React项目是用 ...

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

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

  9. React + fetch API + 百度地图api + 跨域 填坑

    做项目遇到一个百度地图api 的跨域问题.由于使用fetch ,在调用类似 http://api.map.baidu.com/geocoder/v2/callback=renderReverse&am ...

随机推荐

  1. 入门迅速、应用广泛、月薪两万,马哥Python前景为什么这么好?

    随着Python的技术的流行,Python在为人们带来工作与生活上带来了很多的便捷,因为Python简单,学起来快,也是不少新手程序员入门的首选语言.新手们比较关心的就是Python的发展前景与方向. ...

  2. 第2节 mapreduce深入学习:15、reduce端的join算法的实现

    reduce端的join算法: 例子: 商品表数据 product: pidp0001,小米5,1000,2000p0002,锤子T1,1000,3000 订单表数据 order:       pid ...

  3. tinyxml

    在TinyXML中,根据XML的各种元素来定义了一些类:        TiXmlBase:整个TinyXML模型的基类.        TiXmlAttribute:对应于XML中的元素的属性.   ...

  4. javascript事件委托和jquery事件委托

    元旦过后,新年第一篇. 初衷:很多的面试都会涉及到事件委托,前前后后也看过好多博文,写的都很不错,写的各有千秋,自己思前想后,为了以后自己的查看,也同时为现在找工作的前端小伙伴提供一个看似更全方位的解 ...

  5. nginx+redis安装配置(内存型数据库)实现session的共享

    注意:借鉴原文章:http://www.cnblogs.com/roy-blog/p/7196054.html 感兴趣的可以加一下481845043 java交流群,共同进步. 1 session的概 ...

  6. 【tips】RESTful架构

    认识RESTful在前后端分离的应用模式里,后端API接口如何定义?例如对于后端数据库中保存了商品的信息,前端可能需要对商品数据进行增删改查,那相应的每个操作后端都需要提供一个API接口:    PO ...

  7. POJ-2594 Treasure Exploration floyd传递闭包+最小路径覆盖,nice!

    Treasure Exploration Time Limit: 6000MS   Memory Limit: 65536K Total Submissions: 8130   Accepted: 3 ...

  8. CSU 1258 异或运算的线段树

    题目大意:在给定区间内对每个数的最后一个二进制为1的位将其修改为0,如果数本身已经为0了,就不做改变 输出给定区间的所有数的异或值 #include <cstdio> #include & ...

  9. acm 一年总结

    首先是大一的一段简短历史,和其他人不太一样,刚上大一的我等于是刚刚接触电脑,开始下载程序啦,安装系统了,电脑出个小问题啦自己都不会解决,然后大一还开了一门叫做c语言的课程,顿时傻逼了,当时也不用功,大 ...

  10. 【bzoj1965】[Ahoi2005]SHUFFLE 洗牌 - 快速幂

    为了表彰小联为Samuel星球的探险所做出的贡献,小联被邀请参加Samuel星球近距离载人探险活动. 由于Samuel星球相当遥远,科学家们要在飞船中度过相当长的一段时间,小联提议用扑克牌打发长途旅行 ...