微信小程序之地图

微信小程序之地图

简介

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

操作：

1. 申请开发者密钥（key）：申请密钥

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

   (小程序SDK需要用到webserviceAPI的部分服务，所以使用该功能的KEY需要具备相应的权限)

3. 下载微信小程序JavaScriptSDK，微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

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

5. 小程序示例

1、地点搜索与地址解析

<map id="myMap"
    markers="{{markers}}"
    style="height:{{windowHeight}};width:100%;"
    longitude="{{longitude}}"
    latitude="{{latitude}}" scale='16'>
</map>

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

    /**
     * 页面的初始数据
     */
    data: {
        word:'维也纳国际酒店',
        address:'地址',
        markers:null,
        latitude:'',
        longitude:'',
        windowHeight:''
    },
    formSubmit() {
        var _this = this;
        //调用地址解析接口
        qqmapsdk.geocoder({
          //获取表单传入地址
          address: _this.data.address, //地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'
          success: function(res) {//成功后的回调
            var res = res.result;
            let location = res.location.lat + ',' +res.location.lng
            _this.setData({
                latitude: res.location.lat,
                longitude: res.location.lng,
            })
            _this.nearby_search(location)
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
          }
        })
    },
    nearby_search:function(location){
        var _this = this;
        // 调用接口
        qqmapsdk.search({
           keyword: _this.data.word,  //搜索关键词
           location: location,  //设置周边搜索中心点
           success: function (res) { //搜索成功后的回调
             var mks = []
             for (var i = 0; i < res.data.length; i++) {
               mks.push({ // 获取返回结果，放到mks数组中
                 title: res.data[i].title,
                 id: res.data[i].id,
                 latitude: res.data[i].location.lat,
                 longitude: res.data[i].location.lng,
                 iconPath: "../../img/mk.png", //图标路径
                 width: 20,
                 height: 20
               })
             }
             _this.setData({ //设置markers属性，将搜索结果显示在地图中
               markers: mks
             })
           },
           fail: function (res) {
             console.log(res);
           },
           complete: function (res){
             console.log(res);
           }
       });
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        this.formSubmit()
        var windowHeight = wx.getSystemInfoSync().windowHeight
		this.setData({
			windowHeight:(windowHeight-44)+'px'
		})
    },
})

2、关键词输入搜索提示

<van-sticky>
    <view>
    <van-search value="{{ backfill }}" shape="round" placeholder="请输入地址" use-action-slot bind:change="getsuggest" bind:search="onSearch">
        <view slot="action" bind:tap="onClick">取消</view>
    </van-search>
    </view>
</van-sticky>

<view wx:for="{{suggestion}}" wx:key="index">
    
    <view class="list-box" bindtap="backfill" data-title="{{item.title}}">
        <view style="" id="{{index}}">{{item.title}}</view>
        <view style="font-size:12px;color:#666;">{{item.addr}}</view>
    </view>
</view>

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

//触发关键词输入提示事件
    getsuggest: function(e) {
        console.log(e);
        var _this = this;
        //调用关键词提示接口
        qqmapsdk.getSuggestion({
          //获取输入框值并设置keyword参数
          keyword: e.detail, //用户输入的关键词，可设置固定值,如keyword:'KFC'
          //region:'北京', //设置城市名，限制关键词所示的地域范围，非必填参数
          success: function(res) {//搜索成功后的回调
            console.log(res);
            var sug = [];
            for (var i = 0; i < res.data.length; i++) {
              sug.push({ // 获取返回结果，放到sug数组中
                title: res.data[i].title,
                id: res.data[i].id,
                addr: res.data[i].address,
                city: res.data[i].city,
                district: res.data[i].district,
                latitude: res.data[i].location.lat,
                longitude: res.data[i].location.lng
              });
            }
            _this.setData({ //设置suggestion属性，将关键词搜索结果以列表形式展示
              suggestion: sug
            });
          },
          fail: function(error) {
            console.error(error);
          },
          complete: function(res) {
            console.log(res);
          }
        });
    },

3、逆地址解析

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、官网：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview