【uniapp小程序实战】—— 使用腾讯地图获取定位_uniapp 腾讯地图
    		       		warning:
    		            这篇文章距离上次修改已过438天,其中的内容可能已经有所变动。
    		        
        		                
                在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中配置相应的权限,并在真机上运行,模拟器可能无法获取位置信息。
评论已关闭