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 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
javascript 快速排序函数代码
May 30 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
js仿微博动态栏功能
Feb 22 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
vue-router 组件复用问题详解
Jan 22 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
javascript实现二分查找法实现代码
2007/11/12 Javascript
js 页面执行时间计算代码
2009/03/04 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
使用python Django做网页
2013/11/04 Python
Python批量创建迅雷任务及创建多个文件
2016/02/13 Python
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
秘书岗位职责
2013/11/18 职场文书
个人作风剖析材料
2014/02/02 职场文书
护士毕业生自荐信
2014/02/07 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
关于保护环境的标语
2014/06/09 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
小学生植树节活动总结
2014/07/04 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书