微信小程序(五十七)打开腾讯地图选择位置

注释很详细,直接上代码

前提配置看第五十四篇🐧

上一篇

新增内容:
1.使用地图选择位置的方法让用户重新选择大概的位置
2.留下经纬度接口以便于更新新的附近位置列表

源码:

index.wxml

xml 复制代码
<button bind:tap="chooseLocationByMap" type="primary">打开地图获取位置</button>

index.js

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

//创建实例
const qqmapsdk=new QQMapWX({//填上自己之前创建并分配了额度的key
  key:'QWQBZ-XR5CZ-Z2IXO-Z2FDP-ADRS3-QCBBX'//随时失效自个申请一个吧
})

Page({
  async chooseLocationByMap(){
    //打开地图获取位置
    const res=await wx.chooseLocation()
    console.log(res)

    //解构经纬度便于其他接口使用
    const {latitude,longitude}=res

    console.log(latitude,longitude)

  }
})

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": [
    "chooseLocation"//这里是需要声明使用的(记得删注释)
  ],
  "permission": {
    "scope.userLocation": {
      "desc": "您的位置信息将用于为您提供准确的服务"
    }
  }
}

效果演示:

相关推荐
丁总学Java3 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域5 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8685 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165025 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦12 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac15 小时前
微信小程序的组件
微信小程序
stormjun17 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck17 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23419 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong19 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序