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实现GriwView单列全选(自写代码)
May 13 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
Angular2入门--架构总览
Mar 29 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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获取程序执行的时间
2013/06/09 PHP
PHP _construct()函数讲解
2019/02/03 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
Python 学习笔记
2008/12/27 Python
Python探索之SocketServer详解
2017/10/28 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
python队列Queue的详解
2019/05/10 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
基于Python正确读取资源文件
2020/09/14 Python
Python pickle模块常用方法代码实例
2020/10/10 Python
用python读取xlsx文件
2020/12/17 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
共筑中国梦演讲稿
2014/04/23 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
对外汉语专业大学生职业生涯规划书
2014/10/11 职场文书
初中军训感言
2015/08/01 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python