vue百度地图 + 定位的详解

 更新时间:2019年05月13日 11:23:05   作者:omyrobin2  
这篇文章主要介绍了vue百度地图 + 定位的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

vue 百度地图 + 定位

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

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

 

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

三、在项目中引入BMap:

四、代码:

<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百度地图 + 定位详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • npm install sentry-cli失败的问题解决

    npm install sentry-cli失败的问题解决

    本文主要介绍了npm install sentry-cli失败的问题解决,文章首先描述了问题现象,然后分析了问题的原因,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • vue-router 路由传参问题(路由传参方式)

    vue-router 路由传参问题(路由传参方式)

    路由传参主要有两种方式一种是路径传参一种是参数传递,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue3中使用router4 keepalive的问题

    vue3中使用router4 keepalive的问题

    这篇文章主要介绍了vue3中使用router4 keepalive的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • elementui+vue+axios实现文件上传本地服务器

    elementui+vue+axios实现文件上传本地服务器

    这篇文章主要为大家详细介绍了elementui+vue+axios实现文件上传本地服务器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 面试官常问Vue和React区别解析

    面试官常问Vue和React区别解析

    Vue和React都是流行的前端框架,它们有很多相似之处,如组件化和使用虚拟DOM,但是,它们在设计理念、组件存在形式、diff优化和中文文档方面存在一些不同,这篇文章给大家介绍面试官常问Vue和React区别,感兴趣的朋友一起看看吧
    2025-02-02
  • vue父子组件的嵌套的示例代码

    vue父子组件的嵌套的示例代码

    本篇文章主要介绍了vue父子组件的嵌套的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue.js 动态为img的src赋值方法

    Vue.js 动态为img的src赋值方法

    下面小编就为大家分享一篇Vue.js 动态为img的src赋值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 在Vue组件中获取全局的点击事件方法

    在Vue组件中获取全局的点击事件方法

    今天小编就为大家分享一篇在Vue组件中获取全局的点击事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 如何用vue2+element-ui实现多行行内表格编辑

    如何用vue2+element-ui实现多行行内表格编辑

    最近开发项目,关于表格的数据操作比较多,这个地方个人觉得比较难搞,特此记录一下,这篇文章主要给大家介绍了关于如何用vue2+element-ui实现多行行内表格编辑的相关资料,需要的朋友可以参考下
    2024-08-08
  • 浅谈vue-cli5关于yarn的一个小坑

    浅谈vue-cli5关于yarn的一个小坑

    本文主要介绍了vue-cli5关于yarn的一个小坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05

最新评论