wepy小程序+腾讯位置服务的路线规划问题

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

踩坑、踩坑、踩坑、踩坑

1、报错没导进去

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

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

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

###template部分


script部分

// 腾讯地图sdk
import 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("规划路线完毕");
        	})
    	}
    }

你可能感兴趣的:(小程序,wepy,路线规划,腾讯位置服务)