uni-app中小程序地图展示具体的位置以及如何获取移动端天气的温度展示

移动端展示具体的位置

比如悦来广场国贸大厦，，利用的腾讯地图的相关接口，参考地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder

具体代码如下：

uni.getLocation({type: 'gcj02',success: function(res) {var lon2 = res.longitude;   //经度var lat2 = res.latitude;    //维度console.log(lon2, lat2, '==```')var lo = lat2 + ',' + lon2uni.request({url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +lo +'&key=UM6BZ-7IC3I-XXJG5-UOE54-4LM27-YQBCU&get_poi=0', //仅为示例，并非真实接口地址。success: (res) => {console.log('这是打印出来的具体信息，根据实际情况做出展示',res.data.result);}});}
});

 

移动端展示具体的位置

比如悦来广场国贸大厦，，利用的腾讯地图的相关接口，参考地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceGcoder

具体代码如下：

uni.getLocation({type: 'gcj02',success: function(res) {var lon2 = res.longitude;   //经度var lat2 = res.latitude;    //维度console.log(lon2, lat2, '==```')var lo = lat2 + ',' + lon2uni.request({url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' +lo +'&key=UM6BZ-7IC3I-XXJG5-UOE54-4LM27-YQBCU&get_poi=0', //仅为示例，并非真实接口地址。success: (res) => {console.log('这是打印出来的具体信息，根据实际情况做出展示',res.data.result);}});}
});

移动端天气温度的展示

高德天气免费接口，组件代码

<template><div class="weather">{{ weather }}</div>
</template>
<script>
// import axios from "axios";
export default {name: "weatherOne",data() {return {weather: "1",};},created() {this.getList();},methods: {getList() {let that = this;uni.request({url: 'https://restapi.amap.com/v3/weather/weatherInfo', //仅为示例，并非真实接口地址。
        data: {city: 370500,key: "a7bf1ff8b90af5c9bc6c59a972d77482",},success: (response) => {let weatherInfo = response.data.lives[0].weather;let temperature = response.data.lives[0].temperature;// console.log(weatherInfo);that.weather = `${weatherInfo}    ${temperature}  °C`;// console.log('嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎',response,that.weather);
        }});},},
};
</script>
<style lang="scss" scoped>
.weather {display: inline;font-size: 32rpx;font-family: Microsoft YaHei;color: #333333;line-height: 50rpx;
}
</style>