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 + ',' + lon2
    uni.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 + ',' + lon2
    uni.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>