【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图

作者：System 时间：2024年08月19日分类：所有,小程序字数：1145

这篇文章距离上次修改已过261天，其中的内容可能已经有所变动。

在uniapp中使用腾讯地图获取位置信息，可以通过调用uni的API来实现。以下是一个简单的示例代码，展示了如何在uniapp中使用uni的API获取当前位置信息并使用腾讯地图展示：

<template>
  <view>
    <map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14"></map>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        latitude: '',
        longitude: ''
      }
    },
    onLoad() {
      this.getLocation();
    },
    methods: {
      getLocation() {
        let that = this;
        uni.getLocation({
          type: 'wgs84',
          success(res) {
            that.latitude = res.latitude;
            that.longitude = res.longitude;
          },
          fail() {
            uni.showToast({
              title: '无法获取位置信息',
              icon: 'none'
            });
          }
        });
      }
    }
  }
</script>

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

这段代码首先在data中定义了两个变量latitude和longitude来存储纬度和经度信息。然后在onLoad生命周期中调用getLocation方法，使用uni.getLocation API获取当前位置，成功后将位置信息存储到data中的变量，并在map组件中展示。如果获取位置失败，则使用uni.showToast API给用户一个提示。

注意：使用前请确保已在manifest.json中配置相应的权限，并在真机上运行，模拟器可能无法获取位置信息。

【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图

评论已关闭

推荐阅读