小程序使用腾讯地图实现线路规划_腾讯地图api在支付宝小程序能用吗?

问题：微信小程序测试号在开发者工具中可以显示出地图路线，而手机扫码不能显示路径，手机真机调试可以显示出路径。
解决：在微信消息界面下拉，有一个最近使用的小程序，把测试号删了就能正常显示了，可能是因为缓存问题导致不显示。
问题：在微信开发者工具中定位总是定位到人民政府。
解决：因为电脑上小程序是使用ip定位，所以会不准确，以真机调试为准。

使用腾讯地图api实现线路规划

首先按照步骤来做

在小程序根目录下新建libs文件夹，将下载的SDK放在文件夹中，如图

下载 jssdkv1.2

//在js文件中最上面写(page外面)
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk = new QQMapWX({
    key: '你的key值' // 必填
});
1
2
3
4
5

//在js文件的page里写
data: { 
    polyline: [],
    markers: [   //在地图上根据经纬度标记点
        {
            id:0,
            iconPath:"/img/marker_red.png",  //这个是我的图片位置，不要直接复制
            longitude:'自己填写',
            latitude:'自己填写'
        },
        {
            id:1,
            iconPath:"/img/marker_red.png", //这个是我的图片位置，不要直接复制
            longitude:'自己填写',
            latitude:'自己填写',
        }
    ], 
    latitude: '', 
    longitude: '',
    address:"",
}, 
onLoad: function() { 
    var that=this;
    wx.getLocation({
      type:"gcj02",
      success:function(res){
        that.setData({
            latitude:res.latitude,
            longitude:res.longitude
        })
        qqmapsdk.direction({
            mode:'driving',
            from:{    //起始点的经纬度
                latitude:res.latitude,
                longitude:res.longitude
            },
            to:'自己填写',//目的地的经纬度
            waypoints:'自己填写',//途径的地点的经纬度
            policy:'LEAST_TIME,NAV_POINT_FIRST',
            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属性，将路线显示出来,将解压坐标第一个数据作为起点
                that.setData({
                    // latitude: pl[0].latitude,
                    // longitude: pl[0].longitude,
                    polyline: [{
                        points: pl,
                        color: "#20B2AA", width: 4, dottedLine: false
              
                    }]
                })
            },
            fail:function (error) {
                console.log(error);
            },
            complete:function (res) {
                console.log(res);
            }
        });
      }
      
    })
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

具体路线规划详情方法可查看官网
wxml中写以下内容

<map
    longitude="{{longitude}}"
    latitude="{{latitude}}" 
    markers="{{markers}}"
    polyline="{{polyline}}"
    show-location
    scale='14'
    style="width:100%;height:300px;">
</map>
1
2
3
4
5
6
7
8
9

OK!!!