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 相关文章推荐
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
微信小程序实现点击页面出现文字
Sep 21 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 Hex RGB颜色值互换的使用
2013/05/10 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
常用js脚本
2006/12/03 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
基于Javascript实现弹出页面效果
2016/01/01 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
Python获取系统默认字符编码的方法
2015/06/04 Python
python实现百度语音识别api
2018/04/10 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
期末总结的个人自我评价
2013/11/02 职场文书
公司联欢会策划方案
2014/05/19 职场文书
汽车检测与维修专业求职信
2014/07/04 职场文书
投标承诺函范文
2015/01/21 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
高一语文教学反思
2016/02/16 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
Mysql将字符串按照指定字符分割的正确方法
2022/05/30 MySQL
Django框架模板用法详解
2022/06/10 Python