微信小程序调用腾讯地图API进行驾车路线规划

微信小程序调用腾讯地图API进行驾车路线规划

申请key

微信小程序的地图api是非常有限的,所以部分功能实现需要调用地图api.使用腾讯地图api过程如下:
首先要在腾讯地图开发平台先注册账号,申请key腾讯地图开发平台
在这里插入图片描述
申请完key对其进行设置
在这里插入图片描述

下载sdk

下载sdk并解压将其放入到你的微信小程序的目录中。jssdk v1.2

实现代码

.js文件

// 引入SDK核心类
var QQMapWX = require('../../assets/qqmap-wx-jssdk.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: '地图key' // 必填
});
Page({
  data: {
    ployline: [],//路线渲染
    latitude: 22.7340784793,//纬度
    longitude: 113.504708375,//经度
    //标记点
    markers: [{
      iconPath: "../images/123.png",
      id: 0,
      longitude: 113.504508375,
      latitude: 22.7344784793,
      width: 20,
      height: 20,
    }],

  },
  onLoad: function (options) {  
    var _this = this;
    //调用距离计算接口
    qqmapsdk.direction({
      mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填
      //from参数不填默认当前地址
      from:'22.7344784793,113.504708375',
      to: '22.7342920943,108.594824432',
      success: function (res) {
        console.log(res);
        var ret = res;
        var coors = ret.result.routes[0].polyline, pl = [];
        //坐标解压(返回的点串坐标,通过前向差分进行压缩)
        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) {
          pl.push({ latitude: coors[i], longitude: coors[i + 1] })
        }
        console.log(pl)
        //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点
        _this.setData({
          latitude: pl[0].latitude,
          longitude: pl[0].longitude,
          polyline: [{
            points: pl,
            color: "#20B2AA", width: 4, dottedLine: false
          
          }]
        })
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },
  //视野发生变化时触发
  regionchange(e) {
    console.log(e.type)
  },
  //单击标记点时触发
  markertap(e) {
    console.log(e.markerId)
  },
  //单击空间上时触发
  controltap(e) {
    console.log(e.controlId)
  }
})

请求腾讯地图API路线规划开发文档
.wxml


<map id='map' longitude="{{longitude}}" latitude="{{latitude}}"
 markers="{{markers}}" polyline="{{polyline}}" 
 bindregionchange="regionchange" show-location style='width:100%;height:70vh;'></map>

在这里插入图片描述

遇到的问题

在开发者工具可以显示,而在真机不能显示规划路线。原因是我们需要在微信公众平台上进行设置request合法域名,添加https://apis.map.qq.com

在这里插入图片描述
在这里插入图片描述

发布了29 篇原创文章 · 获赞 25 · 访问量 1万+
展开阅读全文

微信程序之高德地图API路线规划

09-21

#wxml代码# ``` <view class="flex-style"> <view class="flex-item active" bindtouchstart="goToCar">驾车</view> <view class="flex-item" bindtouchstart="goToWalk">步行</view> <view class="flex-item" bindtouchstart="goToBus">公交</view> <view class="flex-item" bindtouchstart="goToRide">骑行</view> </view> <view class="map_box"> <map id="navi_map" longitude="{{longitude}}" latitude="{{latitude}}" scale="12" markers="{{markers}}" polyline="{{polyline}}" show-location="true"></map> </view> <view class="text_box"> <view class="text">{{distance}}</view> <view class="text">{{cost}}</view> <view class="detail_button" bindtouchstart="goDetail">详情</view> </view> ``` #js代码# ``` var amapFile = require('../../utils/amap-wx.js'); var config = require('../../utils/config.js'); Page({ data: { markers: [{ iconPath: "../../img/mapicon_navi_s.png", id: 0, latitude:'', longitude:'', width: 23, height: 33 },{ iconPath: "../../img/mapicon_navi_e.png", id: 0, latitude:'', longitude:'', width: 24, height: 34 }], distance: '', cost: '', polyline: [] }, onLoad: function() { var that = this; var key = config.Config.key; var myAmapFun = new amapFile.AMapWX({key: key}); myAmapFun.getDrivingRoute({ success: function(data){ origin: data[0].longitude,data[0].latitude; destination: data[1].longitude,data[1].latitude; var marker = [{ latitude: data[0].latitude, longitude: data[0].longitude }, { latitude: data[1].latitude, longitude: data[1].longitude } ] that.setData({ markers: marker[0], latitude: data[0].latitude, longitude: data[0].longitude }); that.setData({ markers: marker[1], latitude: data[1].latitude, longitude: data[1].longitude }); var points = []; if(data.paths && data.paths[0] && data.paths[0].steps){ var steps = data.paths[0].steps; for(var i = 0; i < steps.length; i++){ var poLen = steps[i].polyline.split(';'); for(var j = 0;j < poLen.length; j++){ points.push({ longitude: parseFloat(poLen[j].split(',')[0]), latitude: parseFloat(poLen[j].split(',')[1]) }) } } } that.setData({ polyline: [{ points: points, color: "#0091ff", width: 6 }] }); if(data.paths[0] && data.paths[0].distance){ that.setData({ distance: data.paths[0].distance + '米' }); } if(data.taxi_cost){ that.setData({ cost: '打车约' + parseInt(data.taxi_cost) + '元' }); } } }) }, goDetail: function(){ wx.navigateTo({ url: '../navigation_car_detail/navigation' }) }, goToCar: function (e) { wx.redirectTo({ url: '../navigation_car/navigation' }) }, goToBus: function (e) { wx.redirectTo({ url: '../navigation_bus/navigation' }) }, goToRide: function (e) { wx.redirectTo({ url: '../navigation_ride/navigation' }) }, goToWalk: function (e) { wx.redirectTo({ url: '../navigation_walk/navigation' }) } }) ``` 怎么改才能让marker的两个标记变成活的经纬度,原来的高德地图API是两个写死的经纬度,[高德路线规划](http://lbs.amap.com/api/wx/guide/route/route),现在这个样子是我自己改的,摸索了微信小程序3天了,还不太懂,希望有大神能不吝赐教!! 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览