vue 百度地图 + 定位

最新推荐文章于 2025-04-20 22:43:03 发布

omyrobin2

最新推荐文章于 2025-04-20 22:43:03 发布

阅读量2.3w

点赞数 2

分类专栏： vue 文章标签：百度地图 vue vue百度地图 vue百度定位

本文链接：https://blog.csdn.net/gh1205/article/details/78929217

版权

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue项目中集成百度地图API并实现基本的地图显示及用户位置定位功能。主要内容包括：在项目中引入百度地图JS库、配置Webpack加载地图资源、编写组件以展示地图并获取当前位置坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>