wepy小程序中使用 腾讯位置服务 --路线规划

踩坑、踩坑、踩坑、踩坑

1、报错没导进去

qqmapwx 一定要小写
import qqmapwx from ‘…/libs/qqmap-wx-jssdk.min.js’;

2、起点偏移问题 --起点不是定位点

获取位置类型要是gcj02  格式
getLocation({type: ‘gcj02’})

###template部分

template input type="text" class="inp" confirm-type="done" value="" bindblur="bindkeyInput"/    map class="map"     id="map"     scale="18"     show-compass="true"     show-location="true"     enable-rotate="true"     longitude="{{longitude}}"     latitude="{{latitude}}"     polyline="{{polyline}}"    markers="{{markers}}"     /map scroll-view scroll-y="{{true}}" class="position-list"    view wx:for="{{markers}}" wx:key class="item" @tap="makertap({{item.latitude}},{{item.longitude}},{{item.id}})"        view class="tit"{{item.title}}/view        view wx:if="{{item.id == option}}" class="tip"预计{{distance}}米{{time}}分钟/view    /view/scroll-view/template

script部分

// 腾讯地图sdkimport qqmapwx from '../libs/qqmap-wx-jssdk.min.js';var qqmapsdk;export default class map extends wepy.page {data={    longitude:'',    latitude:'',    markers:[],//搜索到的点    polyline: [],//路径    keyword: '',//输入关键字搜索词    time: '', //花费多少时间    distance: '',//多远    option: ''}async onLoad(){  const location = await  wepy.getLocation({type: 'gcj02'}).catch(function(data){         if(data.errMsg.match("getLocation:fail auth")){             wx.showModal({                title: "温馨提示",                content: "系统需要获取你的地理位置来完成签到操作",                success(res){                    console.log('用户未授权')                    if(res.confirm){                        wx.openSetting()                        // 打开用户设置                    }                    else {                        console.log('用户点击取消')                    }                }            })         }else{             wx.showModal({                 title: "温馨提示",                 content:'请确保GPS已打开',                 success(){                     console.log('未打开GPS')                 }             })         }                 });     this.latitude=location.latitude;    this.longitude=location.longitude;      this.$apply();}methods={    bindkeyInput(e){        this.keyword = e.detail.value;        this.$apply();        // console.log(e.detail.value);        var that = this;        // 调用腾讯接口        qqmapsdk = new qqmapwx({        key: '申请的key'   });        qqmapsdk.search({            keyword: this.keyword,            page_size: 15,//每页多少条，默认第一页            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: "../images/marker_red.png", //图标路径                        width: 15,                        height: 18,                    })                }                that.markers = mks;                that.$apply();            },            fail: function (res) {                console.log(res);            }        });    },    async makertap(a,b,c){//a,b是终点坐标        this.option = c;        this.$apply();        var _this = this;        var lat = _this.latitude;        var lng = _this.longitude;        // console.log(a,b);                const ret = wepy.request('https://apis.map.qq.com/ws/direction/v1/bicycling/?from='+lat+','+lng+'&to='+a+','+b+'&key=申请的key');        ret.then(function(res){            // console.log(res)            var coors = res.data.result.routes[0].polyline;            // console.log(coors)            _this.time = res.data.result.routes[0].duration;//花费多少时间            _this.distance = res.data.result.routes[0].distance;//距离多少米                        var kr = 1000000,                pl = [];            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]})            }            _this.polyline=[{                points:pl,                color: '#FF0000DD',                width: 2            }];            _this.$apply();            console.log("规划路线完毕");        })    }    }