详解vue项目中调用百度地图API使用方法


Posted in Javascript onApril 25, 2019

步骤一:申请百度地图密钥;

JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请  认证企业用户。百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key  

步骤二:在index.html中添加百度地图JavaScript API接口;  

<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>  // v1.4版本以及以前版本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥" ></script> //1.5版本,需要秘钥

步骤三:在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级;如果还有其他的,同样在下面引入就可以了,比如自定义覆盖物BMap_Symbol_SHAPE_POINT等。    (需要重新 npm run dev才可以)      

module.exports = {
 entry: {
 app: './src/main.js'
 },
 externals: {
 'BMap': 'BMap',
 'BMap_Symbol_SHAPE_POINT': 'BMap_Symbol_SHAPE_POINT'
 },

步骤四:在组件中创建一个容器,用来显示百度地图(宽高最好都是100%);

<div class="baidumap" id="allmap">
</div>

步骤五:在地图组件中import BMap,否则会出现"BMap undefined";还有这个BMap_Symbol_SHAPE_POINT,因为是用“_”连字符,会报错让你这个没有用驼峰命名。所以引入时,把这个连字符去掉就行了。

import BMap from 'BMap
import BMapSymbolSHAPEPOINT from 'BMap_Symbol_SHAPE_POINT'

步骤六:创建地图对象,在mounted生命周期调用;      

mounted () {
 this.baiduMap()
},
methods: {
 // 返回
 goback () {
 this.$router.go(-1)
 },
 baiduMap () {
 var map = new BMap.Map('allmap')
 var point = new BMap.Point(111.742579, 40.818675)
 map.centerAndZoom(point, 12)
 var marker = new BMap.Marker(point) // 创建标注
 map.addOverlay(marker)    // 将标注添加到地图中
 }
}

步骤七:将组件插入父组件中;

详解vue项目中调用百度地图API使用方法

以上所述是小编给大家介绍的vue项目中调用百度地图API使用方法解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript实现颜色渐变的方法
Oct 30 Javascript
JS的get和set使用示例
Feb 20 Javascript
javascript 获取函数形参个数
Jul 31 Javascript
jQuery操作cookie方法实例教程
Nov 25 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JavaScript基础之this详解
Jun 04 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 #Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 #Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 #Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 #Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 #Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 #Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
JavaScript 继承详解(三)
2009/07/13 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Windows下搭建python开发环境详细步骤
2020/07/20 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python PIL库图片灰化处理
2020/04/07 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
业务部主管岗位职责
2014/01/29 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
技术入股协议书
2016/03/22 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技