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 相关文章推荐
flash javascript之间的通讯方法小结
Dec 20 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
Jan 23 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
Jan 11 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
Javascript 高阶函数使用介绍
Jun 15 Javascript
angularjs定时任务的设置与清除示例
Jun 02 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
中国收音机工业发展史
2021/03/02 无线电
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
JavaScript Prototype对象
2009/01/07 Javascript
var与Javascript变量隐式声明
2009/09/17 Javascript
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
浅谈Vue.js
2017/03/02 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python3.6简单操作Mysql数据库
2017/09/12 Python
python re模块findall()函数实例解析
2018/01/19 Python
python 获取url中的参数列表实例
2018/12/18 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
python跨文件使用全局变量的实现
2020/11/17 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
小区门卫工作职责
2013/12/14 职场文书
600字作文之感受大自然
2019/11/27 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript