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

最新推荐文章于 2024-06-02 21:40:20 发布

代码对我眨眼睛

最新推荐文章于 2024-06-02 21:40:20 发布

阅读量761

点赞数 9

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/m0_73756108/article/details/136657472

版权

微信小程序专栏收录该内容

66 篇文章 17 订阅

订阅专栏

本文介绍了如何在微信小程序中使用QQMapWXSDK实现地图选择功能，让用户重新选择位置，并提供经纬度接口以更新附近位置列表。

摘要由CSDN通过智能技术生成

注释很详细，直接上代码

前提配置看第五十四篇🐧

新增内容：

1.使用地图选择位置的方法让用户重新选择大概的位置

2.留下经纬度接口以便于更新新的附近位置列表

源码：

index.wxml

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

index.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（记得删注释）

{
  "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": "您的位置信息将用于为您提供准确的服务"
    }
  }
}