微信小程序免费的高德地图api——获取天气（全过程）
Posted determine ZandR
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序免费的高德地图api——获取天气（全过程）相关的知识，希望对你有一定的参考价值。
介绍
这里是小编成长之路的历程，也是小编的学习之路。希望和各位大佬们一起成长！
以下为小编最喜欢的两句话：
要有最朴素的生活和最遥远的梦想，即使明天天寒地冻，山高水远，路远马亡。
一个人为什么要努力？ 我见过最好的答案就是：因为我喜欢的东西都很贵，我想去的地方都很远，我爱的人超完美。因此，小编想说：共勉！
目录
2、进入控制台===》点击应用管理===》我的应用===》创建应用
一、去注册一个高德地图api的账号
高德官网：高德开放平台 | 高德地图API (amap.com)
二、获取天气前的准备工作
1、登录高德开放平台
2、进入控制台===》点击应用管理===》我的应用===》创建应用
3、创建应用
1)可以选择其他也可以选择天气
2)在刚刚创建的应用中，点击添加
3）添加api key
4）获取到api key
三、获取amap-wx.js
获取实时天气数据-获取数据-开发指南-微信小程序插件|高德地图API (amap.com)
四、创建一个微信小程序
如果是没有账号的话，可以看看小编的另一篇文章
【微信小程序】注册小程序账号、做一个案例——你好我的小程序_determine ZandR的博客-CSDN博客
weather.js
注意：虽然数组为7但是展现的页面还是3天的数据所以小编建议数组长度还是为3，美观一点
// 引用百度地图微信小程序JSAPI模块
let amap = require('../../lib/amap-wx.130.js');
Page(
/**
* 页面的初始数据
*/
data:
ak:"你刚刚获取的api key",
weatherData:'',
futureWeather:[]
,
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options)
var that = this
var myAmapFun = new amap.AMapWX( key: '你刚刚获取的api key' );
myAmapFun.getWeather(
type: 'forecast',//表示获取的是预报信息 默认live（实时天气）
success: function (data)
console.log(data)
//成功回调
var weatherarr = new Array(7);
for (var i = 0; i < 7; i++)
weatherarr[i] = data.forecast.casts[i + 1];//虽然数组长度为7但是只能获取到 后三天预报信息 今日的不保存
that.setData(
forecast: weatherarr
)
,
fail: function (info)
//失败回调
console.log(info)
);
,
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function ()
,
/**
* 生命周期函数--监听页面显示
*/
onShow: function ()
,
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function ()
,
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function ()
,
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function ()
,
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function ()
,
/**
* 用户点击右上角分享
*/
onShareAppMessage: function ()
)weather.wxml
<!--wx:for默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item-->
<!--这是一周的天气 注意：高德api只能获取三天的天气-->
<view class="wetheritemtr" wx:for="forecast" wx:key="index">
<view class="td" wx:if="item.week == 1">周一</view>
<view class="td" wx:if="item.week == 2">周二</view>
<view class="td" wx:if="item.week == 3">周三</view>
<view class="td" wx:if="item.week == 4">周四</view>
<view class="td" wx:if="item.week == 5">周五</view>
<view class="td" wx:if="item.week == 6">周六</view>
<view class="td" wx:if="item.week == 7">周日</view>
<view class="td">天气：item.dayweather转item.nightweather</view>
<view class="td">温度：item.daytemp℃</view>
<view class="td">风速：item.daywind item.daypower</view>
</view>
weather.wxss
page
background: -webkit-linear-gradient(bottom, lightblue, rgb(3, 171, 238), lightblue);
color: #fff;
注意：需要添加高德地图的request域
第一步：
第二步：
第三步：
因为百度地图的天气接口有点问题，所以小编用得是高德api的天气接口
- https://restapi.amap.com
最后展示出来的页面是这样的
效果出来了，但是页面没写什么样式，美感好的同学可以自己写一下样式。
感谢各位大佬的观看，希望大佬们可以多多指教
前端获取用户位置信息
参考技术A 获取key准备工作参考链接： https://lbs.amap.com/api/javascript-api/guide/abc/prepare地图初始化加载的定位只能获取到城市级别信息，如果想获取到具体的位置就要借助浏览器定位。高德JS API提供了AMap.Geolocation插件来实现定位，使用方式如下：
高德JS API提供的浏览器定位接口，融合了HTML5 Geolocation定位接口、精确IP定位服务，以及安卓定位sdk定位。
JS-API的Geolocation定位插件，融合了HTML5 Geolocation定位接口、精确IP定位服务，以及安卓定位sdk定位。其中与安卓定位sdk的结合使用适用于开发安卓系统的H5应用，需同时使用安卓定位sdk和JS-API。
(1)在PC端，因为原生接口成功率很低，JS-API会优先调用精确IP定位服务，在IP定位失败的时候，尝试使用浏览器原生定位接口进行定位，如果原生定位接口也定位失败，则返回error事件或回调error信息。定位成功之后我们会对浏览器定位的经纬度结果进行向高德坐标的转化，并对所有有效定位结果融合地址信息后返回complete事件或者回调complete信息。
(2)在移动端，如果开发者开启了sdk辅助定位，那么安卓手机上我们会优先尝试调用sdk的定位接口，失败之后优先调用浏览器原生定位接口进行定位，浏览器定位失败之后尝试进行精确IP定位，如果以上三种定位全部尝试失败则返回error事件或回调error信息，否则和PC端的一样，定位成功之后进行高德坐标转化和地址融合。
(3)我们在定位的回调或者事件响应中返回了message字段，message字段明确指出了每一步的成功和失败原因。
可以通过如下方法获取定位失败信息，之后根据定位错误信息参考
(1)Get ipLocation failed：IP精确定位失败，精确IP定位服务目前无法完全覆盖所有用户IP，失败率在5%左右；
(2)sdk定位失败：请检查sdk的key是否设置好，以及webview的定位权限及应用和系统的定位权限是否开启。
(3)浏览器定位失败，有多种情况：
注释：如果定位到城市即可满足需求，建议大家改用Geolocation.getCityInfo方法，可以根据IP返回用户所在城市的基本信息，包括省、市名称、adcode、citycode、城市中心点，城市矩形边界等信息。
以上是关于微信小程序免费的高德地图api——获取天气（全过程）的主要内容，如果未能解决你的问题，请参考以下文章