微信小程序坐标位置接口使用整理(二)地图接口

微信小程序坐标位置接口使用整理(二)

微信小程序中实现更多地图服务，可以使用腾讯地图Api。

以下几个场景是使用地图Api调用。

官方Api:微信小程序JavaScript SDK | 腾讯位置服务

一、微信小程序中使用腾讯地图Api流程

1.登录腾讯地图官网，申请秘钥

2.下载JavaScriptSDK,到项目中

 3.小程序后台，域名白名单，设置request合法域名，添加https://apis.map.qq.com

项目中初始化，使用接口

var QQMapWX = require('../../../utils/qqmap-wx-jssdk.min');
var map = null;

    //初始化
    map = new QQMapWX({
      key: 'PNYBZ-XNV36-X64SW-EALEI-2C63E-6MFNJ'
    });

二、指定位置附近“关键词”搜索

    //指定位置附近“关键词”搜索
    map.search({
      keyword: '银行',
      location: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      success: res => {
        console.info(res);
      }
    });

三、逆解析，通过坐标获取，位置名称

    //逆解析，通过坐标获取，位置名称
    map.reverseGeocoder({
      location: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      success: res => {
        console.info(res);
      }
    });

四、解析，获取位置对应的坐标

    //解析，获取位置对应的坐标，济南市槐荫区经十路乐梦中心3号楼3103室
    map.geocoder({
      address:'济南市槐荫区经十路乐梦中心3号楼3103室',
      success:res=>{
        console.info(res);
      }
    });

五、使用地图，路线规划

  //使用地图，路线规划
    map.direction({
      // mode: 'driving',
      from: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      to: {
        latitude: '36.440819',
        longitude: '116.016219'
      },
      success: res => {
        console.info(res);
      }
    });

注意：此处接口是获取规划路线的数据。如果想展示路线规划，请使用腾讯地图小程序组件或者polyline 坐标解压。

polyline 坐标解压，展示路线到map组件：

<map longitude="{{mapinfo.longitude}}"
latitude="{{mapinfo.latitude}}"
scale="12"
polyline="{{polyline}}"
show-location
 ></map>

    //使用地图，路线规划
    var _this = this;
    map.direction({
      // mode: 'driving',
      from: {
        latitude: '36.656858',
        longitude: '116.916358'
      },
      to: {
        latitude: '36.440819',
        longitude: '116.016219'
      },
      success: res => {
        console.info(res);
        var coors = res.result.routes[0].polyline;
        var mapPolyline = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        var kr = 1000000;
        for (var i = 2; i < coors.length; i++) {
          coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (var i = 0; i < coors.length; i += 2) {
          mapPolyline.push({
            latitude: coors[i],
            longitude: coors[i + 1]
          })
        }
        // console.info(mapPolyline);
        _this.setData({
          ['polyline']:[{
            points: mapPolyline,
            color: '#00ff00',
            width: 4
          }]
        });
      }
    });
    this.setData({
      mapinfo: {
        latitude: '36.656858',
        longitude: '116.916358'
      }
    });

展示结果：

 

 

更多：

微信小程序坐标位置接口使用整理(一)

微信小程序switch 样式重写

小程序Image组件长按识别支持的码