2种在vue项目中使用百度地图的简单方法


Posted in Javascript onSeptember 28, 2018

地图在项目中用得很多,最近也用了几次,好长时间不用都记不清了,闲暇时整理了vue里使用百度地图的2种方法,方便自己查看,也分享给大家,希望可以帮助有需要的人。

普遍的方法是:

1.index.html 中引入

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

2.新建个组件maps

注意 :不要把组件命名为map,因为html中有map标签,会报错

报错:Do not use built-in or reserved HTML elements as component id:map

3.然后就可以直接再组件了写相关代码了

mounted(){
   var map = new BMap.Map('map')
   var point = new BMap.Point(108.840053, 34.129522)
   map.centerAndZoom(point, 14)
   //...
  }

另一个方法:

1.新建一个map.js

export function MP(ak) {
 return new Promise(function (resolve, reject) {
  window.onload = function () {
   resolve(BMap)
  }
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";
  script.onerror = reject;
  document.head.appendChild(script);
 })
}

2.在需要用到的地图的vue页面中引入

import {MP} from './map.js'

3.在vue页面中调用

data:{
  return{
    ak:'1287348913029483740293'//密钥
  }
},
mounted(){
  this.$nextTick(function(){
   var _this = this;
   MP(_this.ak).then(BMap => {
    //在此调用api
   })
  }
}
Javascript 相关文章推荐
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
javascript基本语法
May 31 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
angularjs请求数据的方法示例
Aug 06 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
解决Vue打包上线之后部分CSS不生效的问题
Nov 12 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 #Javascript
js隐式转换的知识实例讲解
Sep 28 #Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 #Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 #Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 #Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 #Javascript
学习jQuery中的noConflict()用法
Sep 28 #jQuery
You might like
PHP PDO函数库详解
2010/04/27 PHP
PHP生成唯一订单号
2015/07/05 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascript中检测变量的类型的代码
2010/12/28 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
jQuery实现的自定义弹出层效果实例详解
2016/09/04 Javascript
request请求获取参数的实现方法(post和get两种方式)
2016/09/27 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
JS数组Reduce方法功能与用法实例详解
2020/04/29 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
Python3基础之函数用法
2014/08/13 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
南京某公司笔试题
2013/01/27 面试题
养生餐厅创业计划书范文
2014/03/26 职场文书
民族精神月活动总结
2014/08/28 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
师范生见习报告范文
2014/11/03 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
python图片灰度化处理的几种方法
2021/06/23 Python
redis 解决库存并发问题实现数量控制
2022/04/08 Redis