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 CSS修改学习第三章 修改样式表
Feb 19 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
JavaScript EasyPager 分页函数
May 25 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
js中document.referrer实现移动端返回上一页
Feb 22 Javascript
巧用weui.topTips验证数据的实例
Apr 17 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
js数据类型转换与流程控制操作实例分析
Dec 18 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 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
memcache命令启动参数中文解释
2014/01/13 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
Position属性之relative用法
2015/12/14 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
JS传参及动态修改页面布局
2017/04/13 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
Python程序员鲜为人知但你应该知道的17个问题
2014/06/04 Python
Python制作爬虫抓取美女图
2016/01/20 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
简述Python2与Python3的不同点
2018/01/21 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
Python递归调用实现数字累加的代码
2020/02/25 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
python 无损批量压缩图片(支持保留图片信息)的示例
2020/09/22 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
Linux机考试题
2015/10/16 面试题
精神文明单位申报材料
2014/05/02 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
公司介绍信范文
2015/01/31 职场文书
党支部鉴定意见
2015/06/02 职场文书