详解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 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
基于jquery 的一个progressbar widge
Oct 29 Javascript
纯javascript制作日历控件
Jul 17 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
node运行js获得输出的三种方式示例详解
Jul 02 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
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
2007/05/03 Javascript
JavaScript的变量作用域深入理解
2009/10/25 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
初始Nodejs
2014/11/08 NodeJs
jQuery实现按键盘方向键翻页特效
2015/03/18 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
详解 微信小程序开发框架(MINA)
2019/05/17 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
python中迭代器(iterator)用法实例分析
2015/04/29 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python对象与json相互转换的方法
2019/05/07 Python
Django中多种重定向方法使用详解
2019/07/17 Python
简单了解python协程的相关知识
2019/08/31 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
python 比较字典value的最大值的几种方法
2020/04/17 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
关于老式浏览器兼容HTML5和CSS3的问题
2016/06/01 HTML / CSS
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
优秀的2014年两会精神解读
2014/03/17 职场文书
冬季施工防火方案
2014/05/17 职场文书
优秀求职信
2014/05/29 职场文书
2014年财政所工作总结
2014/11/22 职场文书
三八妇女节慰问信
2015/02/14 职场文书
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js