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 相关文章推荐
IE和firefox浏览器的event事件兼容性汇总
Dec 06 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
svg动画之动态描边效果
Feb 22 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
利用vue+elementUI实现部分引入组件的方法详解
Nov 22 Javascript
vue加载自定义的js文件方法
Mar 13 Javascript
vue调试工具vue-devtools安装及使用方法
Nov 07 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
js实现动态时钟
Mar 12 Javascript
vue中使用mockjs配置和使用方式
Apr 06 Vue.js
实例分析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正则表达式中修饰符/i, /is, /s, /isU
2014/10/21 PHP
深入浅析php json 格式控制
2015/12/24 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
js查找节点的方法小结
2015/01/13 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
js获取及判断键盘按键的方法
2015/12/01 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
python 参数列表中的self 显式不等于冗余
2008/12/01 Python
python计算auc指标实例
2017/07/13 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python多继承顺序实例分析
2018/05/26 Python
python二进制文件的转译详解
2019/07/03 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
南京某公司笔试题
2013/01/27 面试题
客服工作职责
2013/12/11 职场文书
实习生的自我评价
2014/01/08 职场文书
小学生成长感言
2014/01/30 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
政风行风评议工作总结
2014/10/21 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
AJAX实现省市县三级联动效果
2021/10/16 Javascript
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL