uniapp实现移动App地图定位_uniapp地图定位-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75870706/article/details/131554189

本文介绍了如何在uni-app中通过amap和baidu-map插件实现地图定位功能。首先在插件市场安装对应插件，然后在页面中引入地图组件，设置经纬度，并调用uni-app的getLocation方法获取用户位置信息，显示在地图上。

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

可以通过使用 baidu-map 或者 amap 插件来实现 App 地图定位，两个插件分别基于百度地图API和高德地图API

效果图：

一、使用amap插件：

1、安装amap插件：插件市场中搜索并安装"amap"插件

2、在需要使用地图定位的页面中，导入并使用amap组件：

<template>
  <view>
    <amap :longitude="longitude" :latitude="latitude" style="width:100%;height:400rpx;"></amap>
    <view>{{locationInfo}}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 0, // 经度
      latitude: 0, // 纬度
      locationInfo: '', // 位置信息
    }
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          this.locationInfo = `经度：${res.longitude}，纬度：${res.latitude}`;
        },
        fail: (res) => {
          console.log('获取位置信息失败', res);
        }
      });
    }
  }
}
</script>

二、使用baidu-map插件：（同amap插件）

1、安装baidu-map插件：插件市场中搜索并安装"baidu-map"插件

2、使用baidu-map组件：

<template>
  <view>
    <baidu-map :longitude="longitude" :latitude="latitude" style="width:100%;height:400rpx;"></baidu-map>
    <view>{{locationInfo}}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 0, // 经度
      latitude: 0, // 纬度
      locationInfo: '', // 位置信息
    }
  },
  mounted() {
    this.getLocation();
  },
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          this.longitude = res.longitude;
          this.latitude = res.latitude;
          this.locationInfo = `经度：${res.longitude}，纬度：${res.latitude}`;
        },
        fail: (res) => {
          console.log('获取位置信息失败', res);
        }
      });
    }
  }
}
</script>