微信小程序(五十四)腾讯位置服务示范(2024/3/8更新)

教程如下:

上一篇

1.先在官网注册一下账号(该绑定的都绑定一下)

腾讯位置服务官网

2.进入控制台

3.创建应用



3. 额度分配



4.下载微信小程序SDK

微信小程序SDK下载渠道

5.解压将俩js文件放在项目合适的地方

6.加入安全域名or设置不验证合法域名

a. 如果只是自个学习使用而非上线项目眨眼睛建议设置"不验证合法域名"

b. 如果需要上线则在小程序账号添加安全域名

安全域名设置:在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> "服务器域名" 中设置request合法域名,添加https://apis.map.qq.com

到此为止除代码以外的内容都配置好了,使用细节详见下列代码

源码:

app.json

json 复制代码
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents",

  "requiredPrivateInfos": [
    "getLocation",
    "choosePoi",
    "chooseAddress"
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于为您提供准确的服务"
    }
  }
}

index.wxml

xml 复制代码
<button bind:tap="searchSite" type="primary">查询周围的超市</button>

index.js

js 复制代码
// 引入js文件,'../'是往上一级目录,文件地址别搞错了
import QQMapWX from '../../libs/qqmap-wx-jssdk'

//创建实例
const qqmapsdk=new QQMapWX({//填上自己之前创建并分配了额度的key
  key:'IYXBZ-IP6WW-4VAR5-YYZK2-FHER7-XOF4X'
})

Page({
  searchSite(){//搜索演示
    console.log('内容如下:')
    qqmapsdk.search({
      keyword:'超市',//关键词
      success:(res)=>{
        console.log(res)
      }
    })
  }
})

演示效果:(打码的部分就是附近的超市信息了)

相关推荐
是一碗螺丝粉8 小时前
拯救你的app/小程序审核!一套完美避开审核封禁的URL黑名单机制
前端·javascript·微信小程序
weixin_lynhgworld12 小时前
盲盒抽谷机小程序系统开发:从0到1的完整方法论
小程序
weixin_lynhgworld12 小时前
短剧小程序系统开发:赋能创作者,推动短剧艺术创新发展
小程序
一匹电信狗15 小时前
【C++】异常详解(万字解读)
服务器·c++·算法·leetcode·小程序·stl·visual studio
我叫黑大帅16 小时前
微信小程序分包:告别加载慢,像拆快递一样简单!
前端·微信小程序
两个月菜鸟19 小时前
vue+微信小程序 五角星
前端·vue.js·微信小程序
说私域1 天前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务优化及复购转介绍提升策略研究
人工智能·小程序
熬耶2 天前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app
IT毕设实战小研2 天前
基于Spring Boot校园二手交易平台系统设计与实现 二手交易系统 交易平台小程序
java·数据库·vue.js·spring boot·后端·小程序·课程设计
weixin_177297220692 天前
剧本杀小程序系统开发:重构推理娱乐生态
小程序·重构·娱乐