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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
javascript中检测变量的类型的代码
Dec 28 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
Feb 20 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 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各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
JS类的封装及实现代码
2009/12/02 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
通过Javascript读取本地Excel文件内容的代码示例
2014/04/08 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
jQuery选择器_动力节点Java学院整理
2017/07/05 jQuery
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
2020/05/01 Javascript
记录一次websocket封装的过程
2020/11/23 Javascript
Python设计模式之观察者模式实例
2014/04/26 Python
python实现斐波那契递归函数的方法
2014/09/08 Python
在Windows服务器下用Apache和mod_wsgi配置Python应用的教程
2015/05/06 Python
Python list操作用法总结
2015/11/10 Python
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python利用lxml模块爬取豆瓣读书排行榜的方法与分析
2019/04/15 Python
Python计算两个矩形重合面积代码实例
2019/09/16 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
《鱼游到了纸上》教学反思
2014/02/20 职场文书
2014年纪委工作总结
2014/12/05 职场文书
公司员工体检通知
2015/04/21 职场文书
管理者日常工作必备:22条企业管理流程模板!
2019/07/12 职场文书
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python