微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）

最新推荐文章于 2025-07-13 16:29:41 发布

原创

最新推荐文章于 2025-07-13 16:29:41 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在微信小程序中使用Map组件结合高德地图API，获取定位或指定城市的天气信息。通过设置city属性，实现空值时显示定位城市天气，非空时显示指定城市天气。

微信小程序----map组件实现（获取定位城市天气或者指定城市天气数据）

效果图

这里写图片描述

实现原理

采用高德地图微信小程序开发API（getWeather），如果 city 属性的值为空（或者没有city属性），默认返回定位位置的天气数据；如果 city 不为空，则返回 city 指定位置的天气数据。

WXML

<view class="map-weather">
  <view><text>城市：</text>{
      
      {
      
      address}}</view>
  <view><text>天气：</text>{
      
      {
      
      weather}}</view>
  <view><text>温度：</text&g

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

liNewman

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

2401_84149496的博客

04-20

1564

申请到ak后，在我的应用里就能查看到2> 第二步：配置你的request合法域名配置域名请到微信公众平台的后台里设置解压后，里面有2个js文件，一个是常规没压缩的，另一个是压缩过的PS：由于小程序项目文件大小限制为1M，建议使用压缩版的js文件！4> 第四步：引入JS模块在项目根目录下新建一个路径，将百度的js文件拷贝到新建的路径下，完成。如下图所示，新建路径 “libs/bmap-wx” ，将 bmap-xw.min.js 文件拷贝至 “libs/bmap-wx” 路径下。

微信小程序获得当前城市，获得当前天气

qq_37159134的博客

04-16

996

logWriter.WriteLine($"响应内容头: {string.Join(", ", response.Content.Headers.Select(h => $"{h.Key}={string.Join(",", h.Value)}"))}");logWriter.WriteLine($"响应头: {string.Join(", ", response.Headers.Select(h => $"{h.Key}={string.Join(",", h.Value)}"))}");

参与评论您还未登录，请先登录后发表或查看评论

根据地点获取天气情况的小程序

03-01

根据Google 的天气API获取某个地点的天气情况，很简单，只是供大家参考下，里面有些东西是我自己优化过的，呵呵

微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

10-17

主要介绍了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能,涉及微信小程序map组件结合微信API获取天气信息相关操作技巧,需要的朋友可以参考下

微信小程序demo：天气预报，根据经纬度获取城市，获取天气

03-15

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序 通过获取地理位置查看天气

xniYa的博客

05-23

2833

微信小程序 通过获取地理位置查看天气

小程序获取城市经纬度_微信小程序demo：天气预报，根据经纬度获取城市，获取天气...

weixin_39702316的博客

12-19

315

[AppleScript] 纯文本查看复制代码//app.jsPage({data: {city: "",today: {},future:{}},onLoad: function (options) {// 生命周期函数--监听页面加载this.loadInfo();},loadInfo: function () {var page = this;//获取经纬度wx.getLocation({...

微信小程序-排队取号，map组件使用.zip

04-20

在这个"微信小程序-排队取号，map组件使用.zip"的压缩包中，我们很显然是在探讨如何在小程序中实现一个排队取号的功能，并结合Map组件来辅助用户理解和操作。首先，让我们了解一下`map`组件的基本用法。在微信小...

微信小程序--获取用户地理位置名称(无须用户授权)的方法

10-17

微信小程序是微信提供的一种无需下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。而获取用户地理位置是小程序开发中常用的功能之一。微信小程序在获取地理位置信息时默认...

小程序中如何获取当地天气，

qq_42957741的博客

07-03

4444

因为自己的项目有需求，所以今天分享给大家，话不多说上代码! css部分 <text>{{weather.tem}}℃ {{weather.wea}}</text> js部分 Page({ data: { //获取当前天气 weather: { 'wea_img': 'qing' },//实况天气 }, onLoad: func...

小程序实现map搜索/定位/检索/天气/路线规划

02-28

小程序实现map搜索/定位/检索/天气/路线规划。小程序地图采用微信小程序提供的map组件；周边的数据坐标点通过高德地图提供的API接口，获取定位位置的周边或者指定位置周边的数据。此代码提供小程序map搜索/定位/检索/天气/路线规划搜索/定位/

漂亮的微信小程序一周天气预报源码

01-02

闲来无事制作了一个漂亮的小程序天气预报功能, 界面漂亮, 有当前城市, 今日实况天气, 还有一周的天气数据, 生活指数, 推荐下载

微信小程序获取当前天气信息

returndbf的博客

01-14

2676

流程分为两步，首先获取当前位置经纬度，再请求第三方获取天气api 和风天气api所需的用户key获取地址https://dev.qweather.com/docs/api/weather/weather-now/ export function getLocation(that) { //that为引用此函数的页面传给此函数的页面this wx.getLocation({//用小程序官方api获取位置信息 type: 'wgs84', // 获取位置信息必传参数 success: (

微信小程序获取实时天气

qq_18126657的博客

08-18

4042

微信小程序实现实时天气的获取

【微信小程序：天气查询】

m0_67893784的博客

08-20

1445

困难：在Gitee上的文档没有图像，后来我把图像上传到Gitee后得到的链接就可以显示在文档中了，就是比较麻烦。收获和体会：使用了别人提供的API，蛮有意思的。

uniapp微信小程序获取实时天气数据