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

相关文章

  • 深入理解Vuex 模块化(module)

    深入理解Vuex 模块化(module)

    本篇文章主要介绍了Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 基于vue cli重构多页面脚手架过程详解

    基于vue cli重构多页面脚手架过程详解

    本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程,非常不错,具有参考借鉴价值,需要的朋友参考下
    2018-01-01
  • vue组件生命周期钩子使用示例详解

    vue组件生命周期钩子使用示例详解

    这篇文章主要为大家介绍了vue组件生命周期钩子使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 详解Vue2.x-directive的学习笔记

    详解Vue2.x-directive的学习笔记

    这篇文章主要介绍了详解Vue2.x-directive的学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vue项目请求超时处理方式

    Vue项目请求超时处理方式

    这篇文章主要介绍了Vue项目请求超时处理方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • vue中.env文件配置环境变量的实现

    vue中.env文件配置环境变量的实现

    本文主要介绍了vue中.env文件配置环境变量的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue环境如何实现div focus blur焦点事件

    vue环境如何实现div focus blur焦点事件

    这篇文章主要介绍了vue环境如何实现div focus blur焦点事件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue-Router的routes配置详解

    Vue-Router的routes配置详解

    在使用vue-router的项目中,实例化VueRouter是其配置选项routes该选项指定路由与视图的组件的关系或者路由与其他路由的关系,Router配置选项中是其中最重要的配置。本文就详细的介绍一下
    2021-10-10
  • vue.js实现二级菜单效果

    vue.js实现二级菜单效果

    这篇文章主要为大家详细介绍了vue.js实现二级菜单效果的具体方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue使用moment如何将时间戳转为标准日期时间格式

    vue使用moment如何将时间戳转为标准日期时间格式

    这篇文章主要介绍了vue使用moment如何将时间戳转为标准日期时间格式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论