vue引入地图实现定位

引入地图依赖

在Vue项目中引入地图SDK，常见的有高德地图、百度地图或腾讯地图。以高德地图为例，在项目根目录的index.html中引入SDK脚本：

<script src="https://webapi.amap.com/maps?v=2.0&key=你的高德地图Key"></script>

初始化地图组件

创建独立的Vue组件（如MapContainer.vue），在mounted生命周期中初始化地图：

mounted() {
  this.map = new AMap.Map('map-container', {
    zoom: 15,
    center: [116.397428, 39.90923] // 默认北京中心坐标
  });
}

模板部分需包含容器元素：

<div id="map-container" style="width: 100%; height: 400px;"></div>

实现定位功能

通过浏览器Geolocation API获取用户位置，并在地图上标记：

methods: {
  locateUser() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        position => {
          const lnglat = [position.coords.longitude, position.coords.latitude];
          this.map.setCenter(lnglat);
          new AMap.Marker({ position: lnglat, map: this.map });
        },
        error => console.error('定位失败:', error)
      );
    }
  }
}

添加控件优化体验

在地图上添加定位控件增强交互：

this.map.addControl(new AMap.Geolocation({
  enableHighAccuracy: true,
  showButton: true,
  buttonPosition: 'RB'
}));

响应式处理

在组件销毁时清理地图实例：

beforeDestroy() {
  if (this.map) {
    this.map.destroy();
  }
}

注意事项

1. 高德地图Key需替换为实际申请的密钥
2. HTTPS环境下才能使用浏览器定位功能
3. 移动端需处理定位权限申请流程
4. 考虑添加错误处理回调函数
5. 可结合AMap.Weather插件实现天气信息展示