H5获取位置信息的方法

最新推荐文章于 2025-04-01 13:24:01 发布

爱写程序的小高

最新推荐文章于 2025-04-01 13:24:01 发布

阅读量2k

点赞数 3

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_38801090/article/details/138158912

版权

本文介绍了如何通过JavaScript的fetchAPI获取IP地址并结合高德地图API获取用户当前位置和实时天气，包括在Vue项目中引入高德地图所需的配置和调用相关插件的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.根据IP获取

const getGeo = () => {
  fetch("http://ip-api.com/json")
    .then((response) => response.json())
    .then(async (data) => {
      console.log("data===", data);
      this.getAddress(data?.lon,data?.lat)
    })
    .catch((error) => {
      console.error("Error:", error);
    });
    
};
getGeo();

2.高德地图获取位置信息及天气

(1)高德地图官网添加天气应用获取key和密钥

(2)在vue项目public下的index.html中引入script

  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: 'b085928b165e00483d23b263fafecb13',
    }
  </script>
  <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
  <script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key&plugin=(所需api例如AMap.CitySearch,AMap.Weather)">
  </script>

（3）调用获取当前位置api和天气api

  //获取位置
    getCity() {
      let that = this
      if (window) {
        window.AMap.plugin("AMap.CitySearch", function () {
          var citySearch = new window.AMap.CitySearch();
          citySearch.getLocalCity(function (status, result) {
            if (status === "complete" && result.info === "OK") {
              // 查询成功，result即为当前所在城市信息
              console.log("getCity```````", result);
              that.getWeather(result.city)
            }
          });
        });
      }
    },
    // 获取天气
    getWeather(city) {
      let that = this
      // 加载天气查询插件
      window.AMap.plugin("AMap.Weather", function () {
        // 创建天气查询实例
        let weather = new window.AMap.Weather()
        // 执行实时天气信息查询
        weather.getLive(city, function (err, data) {
          if (data.info == "OK") {
              console.log("getWeather```````", data);
            // that.weatherdata = data
          }
        });
      });
    },