uniapp相关地图 API调用

目录

一、 注意事项： manifest.json需增加配置

二、获取用户收货地址 [uni.chooseAddress]

三、获取当前的地理位置、速度 [uni.getLocation]

四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]

五、使用腾讯地图逆地址解析接口实现城市自动定位回显

---

一、 注意事项： manifest.json需增加配置

"mp-weixin": {"requiredPrivateInfos": ["chooseLocation", "getLocation", "getLocation","chooseAddress"],"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示"}}
},

二、获取用户收货地址 [uni.chooseAddress]

API接口参考：https://uniapp.dcloud.net.cn/api/other/choose-address.html#chooseaddress

1、效果图

2、vue页面代码

<template><view><u-icon size="12" name="arrow-down" label="选择地址" labelPos="left"@click="citySelect()"></u-icon></view>
</template><script>export default {data() {return {}},methods: {citySelect(){uni.chooseAddress({type: 'wgs84', success: (res) => {console.log(res)},fail: (err) => {console.error('获取位置失败：', err);}})},}};
</script><style>page {height: 100%;background: white;}.homePage {padding-bottom: 5px;}
</style>

三、获取当前的地理位置、速度 [uni.getLocation]

API接口参考：https://uniapp.dcloud.net.cn/api/location/location.html#getlocation

1、调用方式

uni.getLocation({type: 'wgs84', // 返回可以用于uni.openLocation的经纬度，默认为wgs84的gps坐标success: (res) => {console.log(res)},fail: (err) => {console.error('获取位置失败：', err);}
});

2、res结果

{  "latitude": 29.56471,  "longitude": 106.55073,  "speed": -1,  "accuracy": 65,  "verticalAccuracy": 65,  "horizontalAccuracy": 65,  "errMsg": "getLocation:ok"  
}

四、打开地图选择位置、查看位置(导航) [uni.chooseLocation] [uni.openLocation]

API接口参考：

https://uniapp.dcloud.net.cn/api/location/location.html#chooselocation

https://uniapp.dcloud.net.cn/api/location/open-location.html#openlocation

1、效果图

    

2、子组件代码

<template><view><map id="map" longitude="116.397470" latitude="39.908823" scale="14" @tap="chooseLocation"style="width: 100%; height: 300px;"></map><!-- <view v-if="location">位置：{{ location.address }}<button @click="navigateTo">导航到这里</button></view> --></view>
</template><script>export default {data() {return {location: null}},methods: {chooseLocation() {const that = this;uni.chooseLocation({success(res) {that.location = {latitude: res.latitude,longitude: res.longitude,address: res.address,};that.callParent();},fail(err) {console.log('选择位置失败：', err);},});},callParent() {//传值回父组件this.$emit('parentMethod', this.location);},navigateTo() {if (this.location) {uni.openLocation({latitude: this.location.latitude,longitude: this.location.longitude,address: this.location.address,success() {console.log('导航成功');},fail(err) {console.log('导航失败：', err);},});}},}}
</script><style>
</style>

3、父组件使用子组件

<template><view class="box"><!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 --><u--form labelWidth="120" labelPosition="top" labelAlign="left" :labelStyle="{'fontSize':'14px'}" :model="form"<u-form-item label="位置信息" prop="location"><view>{{location.address}}</view><map-select @parentMethod="callLocation"></map-select></u-form-item></u--form></view>
</template><script>import MapSelect from "@/pages/assembly/MapSelect.vue";export default {components: {'map-select': MapSelect},data() {return {form:{},location:{}};},methods: {callLocation(location){console.log("父组件print:",location);this.location=location;}},};
</script><style>page {height: 100%;background: white;}.box {margin: 10px 20px 20px 20px;}.confirmButton {padding-bottom: 50px;}.u-form-item__body__left.data-v-5e7216f1 {position: relative;}.u-form-item__body__left__content.data-v-5e7216f1 {position: absolute;top: 0;}
</style>

4、res结果

{  "errMsg": "chooseLocation:ok",  "name": "雾都宾馆",  "address": "重庆市渝中区上曾家岩24号",  "latitude": 29.565184,  "longitude": 106.551766  
}

五、使用腾讯地图逆地址解析接口实现城市自动定位回显

uniapp中腾讯地图SDK-安装及配置（自动定位回显城市）-CSDN博客