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开源框架-jQuery使用手册(1)
Mar 10 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
Oct 10 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
javascript中this用法实例详解
Apr 06 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
vue实现图片按比例缩放问题操作
Aug 11 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实现的获取URL信息的类
2007/01/02 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
php实现删除空目录的方法
2015/03/16 PHP
THINKPHP截取中文字符串函数实例代码
2017/03/20 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js Function类型
2011/12/04 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
[01:10]3.19DOTA2发布会 三代刀塔人第一代
2014/03/25 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[02:12]Dota 2 推出全新英雄—— 电炎绝手
2019/08/23 DOTA
python列表的常用操作方法小结
2016/05/21 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
师范大学音乐表演专业求职信
2013/10/23 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
入党现实表现材料
2014/12/23 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书