当前位置：首页 > VUE

vue引入地图实现定位

2026-01-22 08:18:07VUE

使用高德地图实现定位

安装高德地图的 Vue 插件

npm install @amap/amap-jsapi-loader --save

在 Vue 组件中引入并初始化地图

import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  data() {
    return {
      map: null,
      position: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '您的高德地图Key',  // 申请的高德地图开发者Key
        version: '2.0',
        plugins: ['AMap.Geolocation']
      }).then((AMap) => {
        this.map = new AMap.Map('map-container', {
          viewMode: '2D',
          zoom: 15
        });

        const geolocation = new AMap.Geolocation({
          enableHighAccuracy: true,
          timeout: 10000,
          buttonPosition: 'RB',
          showMarker: true,
          showCircle: true
        });

        this.map.addControl(geolocation);
        geolocation.getCurrentPosition();

        AMap.event.addListener(geolocation, 'complete', (data) => {
          this.position = data.position;
        });

        AMap.event.addListener(geolocation, 'error', (error) => {
          console.error('定位失败', error);
        });
      }).catch(e => {
        console.error('地图加载失败', e);
      });
    }
  }
}

在模板中添加地图容器

<template>
  <div id="map-container" style="width: 100%; height: 400px;"></div>
  <div v-if="position">
    当前位置: 经度 {{ position.lng }}, 纬度 {{ position.lat }}
  </div>
</template>

使用百度地图实现定位

安装百度地图 JavaScript API

npm install vue-baidu-map --save

在 main.js 中全局引入

vue引入地图实现定位

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: '您的百度地图AK'  // 申请的百度地图开发者AK
})

在组件中使用定位功能

<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler">
    <bm-geolocation
      anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
      :showAddressBar="true"
      :autoLocation="true"
      @locationSuccess="locationSuccess"
      @locationError="locationError"
    ></bm-geolocation>
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      center: {lng: 116.404, lat: 39.915},
      zoom: 15,
      currentPosition: null
    }
  },
  methods: {
    handler({BMap, map}) {
      this.BMap = BMap;
      this.map = map;
    },
    locationSuccess(point) {
      this.currentPosition = point.point;
      this.center.lng = point.point.lng;
      this.center.lat = point.point.lat;
    },
    locationError(error) {
      console.error('定位失败', error);
    }
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 400px;
}
</style>

使用腾讯地图实现定位

安装腾讯地图 JavaScript API

npm install qqmap --save

在组件中使用定位功能

vue引入地图实现定位

import qqmap from 'qqmap';

export default {
  data() {
    return {
      center: {
        lat: 39.908823,
        lng: 116.397470
      },
      position: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      qqmap({
        key: '您的腾讯地图Key'
      }).then(qq => {
        const map = new qq.maps.Map(document.getElementById('map-container'), {
          center: new qq.maps.LatLng(this.center.lat, this.center.lng),
          zoom: 13
        });

        const geolocation = new qq.maps.Geolocation();
        geolocation.getLocation(position => {
          this.position = position;
          map.setCenter(new qq.maps.LatLng(position.lat, position.lng));
        }, error => {
          console.error('定位失败', error);
        }, {
          timeout: 10000
        });
      });
    }
  }
}

模板部分

<template>
  <div id="map-container" style="width: 100%; height: 400px;"></div>
  <div v-if="position">
    当前位置: 经度 {{ position.lng }}, 纬度 {{ position.lat }}
  </div>
</template>