uni-app获取位置经纬度并定位到当前位置
<p>uni-app使用map组件定位到当前位置并进行标注</p><h3 id="manifestjson添加如下内容">manifest.json添加如下内容：</h3>
<p><img src="https://img2020.cnblogs.com/blog/1041134/202008/1041134-20200826155623554-429994829.png"></p>
<h3 id="需要定位的页面">需要定位的页面</h3>
<pre><code class="language-vue"><template>
<view>
<map
style="width: 100vw; height: 100vh;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"
:markers="markers"
></map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.909, // 默认定在首都
longitude: 116.39742,
scale: 12, // 默认16
markers: [],
markerHeight: 30,
};
},
methods: {
// 初次位置授权
getAuthorize() {
return new Promise((resolve, reject) => {
uni.authorize({
scope: "scope.userLocation",
success: () => {
resolve(); // 允许授权
},
fail: () => {
reject(); // 拒绝授权
},
});
});
},
// 确认授权后，获取用户位置
getLocationInfo() {
const that = this;
uni.getLocation({
type: "gcj02",
success: function (res) {
// 暂时
that.longitude = res.longitude; //118.787575;
that.latitude = res.latitude; //32.05024;
that.markers = [
{
id: "",
latitude: res.latitude,
longitude: res.longitude,
iconPath: "../../static/mark.png",
width: that.markerHeight, //宽
height: that.markerHeight, //高
},
];
that.getList();
},
});
},
// 拒绝授权后，弹框提示是否手动打开位置授权
openConfirm() {
return new Promise((resolve, reject) => {
uni.showModal({
title: "请求授权当前位置",
content: "我们需要获取地理位置信息，为您推荐附近的美食",
success: (res) => {
if (res.confirm) {
uni.openSetting().then((res) => {
if (res.authSetting["scope.userLocation"] === true) {
resolve(); // 打开地图权限设置
} else {
reject();
}
});
} else if (res.cancel) {
reject();
}
},
});
});
},
// 彻底拒绝位置获取
rejectGetLocation() {
uni.showToast({
title: "你拒绝了授权，无法获得周边信息",
icon: "none",
duration: 2000,
});
},
getList() {
console.log("获取周围美食");
},
},
onReady() {
// wx请求获取位置权限
this.getAuthorize()
.then(() => {
// 同意后获取
this.getLocationInfo();
})
.catch(() => {
// 不同意给出弹框，再次确认
this.openConfirm()
.then(() => {
this.getLocationInfo();
})
.catch(() => {
this.rejectGetLocation();
});
});
},
};
</script>
</code></pre><br><br>
来源：https://www.cnblogs.com/XHappyness/p/13523995.html
頁:
[1]