uniapp开发小程序获取定位信息(腾讯地图)
<template>
<view>
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14">
<cover-view class="map-cover">
<cover-image src="/static/location.png"></cover-image>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: '',
longitude: ''
};
},
onLoad() {
this.getLocation();
},
methods: {
getLocation() {
const that = this;
uni.getLocation({
type: 'wgs84',
success(res) {
that.latitude = res.latitude;
that.longitude = res.longitude;
// 使用腾讯地图API进行逆地址解析
that.getAddress(res.latitude, res.longitude);
}
});
},
getAddress(latitude, longitude) {
const that = this;
uni.request({
url: 'https://apis.map.qq.com/ws/geocoder/v1/',
data: {
location: `${latitude},${longitude}`,
key: '您的腾讯地图key'
},
success(res) {
if (res.statusCode === 200) {
const address = res.data.result.address;
uni.showModal({
title: '您当前的位置',
content: address,
showCancel: false
});
}
}
});
}
}
};
</script>
<style>
.map-cover {
position: absolute;
width: 50rpx;
height: 50rpx;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 100;
}
.map-cover image {
width: 100%;
height: 100%;
}
</style>
在这段代码中,首先在<template>
中定义了一个地图组件,并在<script>
中定义了相关的数据和方法。在页面加载时,通过onLoad
钩子调用getLocation
方法获取当前的经纬度,然后使用腾讯地图API的逆地址解析服务(geocoder)获取当前位置的详细地址,并通过uni.showModal
显示给用户。这个例子展示了如何在uni-app中结合小程序的API和第三方地图服务API进行位置信息的获取和应用。
评论已关闭