vue百度地图 + 定位的详解


Posted in Javascript onMay 13, 2019

vue 百度地图 + 定位

 前提需要自己有百度的密钥,如没有可以去百度地图申请

一、在主目录下的index.html引入js,例如:

vue百度地图 + 定位的详解 
vue百度地图 + 定位的详解

二、在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如:

vue百度地图 + 定位的详解

三、在项目中引入BMap:

vue百度地图 + 定位的详解

四、代码:

<template>
 <div class="home">
  <div id="allmap" class="allmap"></div>
 </div>
</template>

<script>
 import {getStore, setStore, removeStore} from '@/config/Utils'
 import BMap from 'BMap'
 export default {
  data () {
   return {
    type: 'tab',
    address_detail: null,
    center: {lng: 116.40387397, lat: 39.91488908}
   }
  },
  mounted () {
   this.ready()
  },
  methods: {
   ready () {
    let map = new BMap.Map('allmap')
    let point = new BMap.Point(this.center.lng, this.center.lat)
    map.centerAndZoom(point, 10)
    map.enableScrollWheelZoom(true)
    map.enableDoubleClickZoom(true)
    var geolocation = new BMap.Geolocation()
    geolocation.getCurrentPosition((r) => {
     if (r.point) {
      this.center.lng = r.longitude
      this.center.lat = r.latitude
      let markers = new BMap.Marker(r.point)
      map.addOverlay(markers)
      map.panTo(r.point)
      map.centerAndZoom(r.point, 16)
     }
    }, { enableHighAccuracy: true })
   }
  }
 }
</script>

<style>
 #allmap{
  width: 100%;
  height: 15rem;
 }
</style>

vue百度地图 + 定位的详解

五、效果:

vue百度地图 + 定位的详解

如有错误地方,请留言指教,谢谢大家

以上所述是小编给大家介绍的vue百度地图 + 定位详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
javascript实现五星评分功能
Nov 10 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
vue中路由参数传递可能会遇到的坑
Dec 07 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
详解webpack 热更新优化
Sep 13 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
Nov 04 Javascript
JavaScript代码实现简单计算器
Dec 27 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 #Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 #Javascript
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 #Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 #Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
You might like
php查询mssql出现乱码的解决方法
2014/12/29 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
Jquery下判断Id是否存在的代码
2011/01/06 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
javascript 实现子父窗体互相传值的简单实例
2014/02/17 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
python使用socket远程连接错误处理方法
2015/04/29 Python
Python中的rjust()方法使用详解
2015/05/19 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
对python 自定义协议的方法详解
2019/02/13 Python
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
学习党章思想汇报
2014/01/07 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
公司会议策划方案
2014/05/17 职场文书
合作协议书范文
2014/08/20 职场文书
党支部班子“四风”问题自我剖析材料
2014/09/28 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
师范生小学见习总结
2015/06/23 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
Java虚拟机内存结构及编码实战分享
2022/04/07 Java/Android