用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序中使用腾讯地图sdk

纸飞机 2018-3-8 09:38

近期在做一款彩票服务类项目中用到了腾讯地图提供的解决方案,拿来给大家分享一下!  使用起来非常简单,就是一些功能还有待完善。  官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html步骤:申请开发者密 ...

近期在做一款彩票服务类项目中用到了腾讯地图提供的解决方案,拿来给大家分享一下!
  使用起来非常简单,就是一些功能还有待完善。
  官方文档:

http://lbs.qq.com/qqmap_wx_jssdk/index.html

步骤:

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

    申请密匙

  2. 下载微信小程序JavaScriptSDK,

    微信小程序JavaScriptSDK v1.0

  3. 安全域名设置,需要在微信公众平台添加域名地址https://apis.map.qq.com
  4. 小程序示例

    // 引入SDK核心类
    var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
    var qqmapsdk;
    Page({
     onLoad: function () {
         // 实例化API核心类
         qqmapsdk = new QQMapWX({
             key: '申请的key'
         });
     },
     onShow: function () {
         // 调用接口
         qqmapsdk.search({
             keyword: '彩票',
             success: function (res) {
                 console.log(res);
             },
             fail: function (res) {
                 console.log(res);
             },
         complete: function (res) {
             console.log(res);
         }
     });
    })

    结果效果图:

    去购彩.png
  5. 核心类
    5.1 地点搜索search(options:Object)
    通过关键词keyword搜索周边poi,比如“酒店”“餐饮”“娱乐”“学校”等
    去购彩界面的实现:
    5.1.1 buy.js

    // 引入腾讯地图SDK核心类
    var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
    var util = require("../../utils/util.js");
    var qqmapsdk;
    Page({
     data: {
      resData: []
     },
     onLoad: function (options) {
      // 实例化腾讯地图API核心类
      qqmapsdk = new QQMapWX({
       key: 'HPNBZ-B426V-CZQPP-UN4R6-QYOF2-MYFU3'//此处使用你自己申请的key
      });
     },
     onShow: function () {
      var that = this;
      // 腾讯地图调用接口
      qqmapsdk.search({
       keyword: '彩票',
       page_size: 20,
       success: function (res) {
        console.log(res);
        var resData = res.data;
        for (var i = 0; i < resData.length; i++) {
         resData[i]._distance = util.formatDistance(resData[i]._distance);//转换一下距离的格式
        }
        that.setData({resData: resData});
       },
       fail: function(res) {
        console.log(res);
       },
       complete: function(res) {
        console.log(res);
       }
      })
     }
    })
    // utils/util.js
    /**
    * 将距离格式化
    * <1000m时 取整,没有小数点
    * >1000m时 单位取km,一位小数点 
    */
    function formatDistance(num) {
     if (num < 1000) {
      return num.toFixed(0) + 'm';
     } else if (num > 1000) {
      return (num / 1000).toFixed(1) + 'km';
     }
    }

    5.1.2 buy.wxml 主要样式采用weui

    <view class="page">
    <view wx:for="{{resData}}" wx:key="shop" class="page__bd">
     <view bindtap="navTo" data-item="{{item}}">
       <view class="weui-panel">
         <view class="weui-panel__bd">
           <view class="weui-media-box weui-media-box_text">
             <view class="weui-media-box__title weui-media-box__title_in-text">{{item.title}}view>
             <view class="weui-media-box__desc">{{item.address}}view>
             <view class="weui-media-box__info">
               <view class="weui-media-box__info__meta">电话:{{item.tel}}view>
               <view class="weui-media-box__info__meta weui-media-box__info__meta_extra">距离:{{item._distance}}view>
             view>
           view>
         view>
       view>
     view>
    view>
    view>

    5.2 关键词输入提示getSuggestion(options:Object)
    用于获取输入关键字的补完与提示,帮助用户快速输入。
    示例:

    // 调用接口
    qqmapsdk.getSuggestion({
     keyword: '技术',
     success: function(res) {
         console.log(res); 
     },
     fail: function(res) {
         console.log(res);
     },
     complete: function(res) {
         console.log(res);
     }
    });

    5.3 距离计算calculateDistance(options:Object)
    计算一个点到多点的步行、驾车距离。
    示例:

    // 调用接口
    qqmapsdk.calculateDistance({
     mode: 'walking';//步行,驾车为'driving'
     to:[{
         latitude: 39.984060,
         longitude: 116.307520
     }, {
         latitude: 39.984572,
         longitude: 116.306339
     }],
     success: function(res) {
         console.log(res);
     },
     fail: function(res) {
         console.log(res);
     },
     complete: function(res) {
         console.log(res);
     }
    });

    5.4 另外还有以下功能,就不一一演示了。

    • getCityList(options:Object):获取全国城市列表数据;
    • getDistrictByCityId(options:Object):通过城市ID返回城市下的区县;
    • reverseGeocoder(options:Object):用于获取输入关键字的补完与提示,帮助用户快速输入
    • geocoder(options:Object):提供由地址描述到所述位置坐标的转换,与逆地址解析reverseGeocoder()的过程正好相反。
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏