uniapp实现移动App地图定位

在uni-app中，你可以使用uni-app-baidu-map插件或者uni-app-amap插件来实现App地图定位。这两个插件分别基于百度地图API和高德地图API，提供了丰富的地图功能和相关API。

停留的章小鱼

2648人浏览 · 2023-07-05 14:54:01

停留的章小鱼 · 2023-07-05 14:54:01 发布

可以通过使用 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>