微信小程序之腾讯地图

1,875 阅读2分钟

这是我参与8月更文挑战的第22天,活动详情查看:8月更文挑战

简介

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大!

操作:

  1. 申请开发者密钥(key):申请密钥

  2. 开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用 ->添加key-> 勾选WebServiceAPI -> 保存

  3. (小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)
    
  4. 下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

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

小程序示例

首先我们要去把下载的小程序JavaScriptSDK,引入到项目中

image.png

然后在需要使用的界面进入js文件

const QQMapWX = require('../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
    key: '应用密钥'
})

功能使用

地点搜索与地址解析

image.png

image.png

image.png

关键词输入搜索提示

image.png

image.png

逆地址解析
const QQMapWX = require('../../../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = new QQMapWX({
    key: '创建应用的key'
})

//先获取坐标值,然后再根据坐标值获取地址名称
getAddressLocation(){
        let that = this
        wx.getLocation({
        type: 'gcj02',
        success (res) {
            const latitude = res.latitude
            const longitude = res.longitude
            that.getAddress(latitude, longitude)
            
        }
        })
    },
    getAddress(latitude, longitude) {
        qqmapsdk.reverseGeocoder({
            location: {latitude,longitude},
            success(res) {
                that.setData({
                    oneTitle:res.result.ad_info.city + res.result.ad_info.district
                })
            }
        })
    },

tip

1、在开发测试的时候会发现获取的定位不准确,其实没事的!!!!!是电脑测试的问题,到了手机测试就会准确了的

2、坐标系最好采用gcj02坐标系,会准确

3、官网:lbs.qq.com/miniProgram…