腾讯地图使用总结 ​

export default {
	data() {
		return {
			scale: 15,
			latitude: 25.09839, // 必填项
			longitude: 117.03736, // 必填项
			markers: [], 
			polyline: [], 
			includePoints: []
		}
	},
}

let that = this; // 这行是关键，位置不要放错

uni.getLocation({
    type: "gcj02", // 这个获取到的点位相对准确一些
    success (res) {
        that.latitude = res.latitude;
        that.longitude = res.longitude;
    }
})

// 将中心点位移动到当前位置
let mpCtx = wx.createMapContext("myMap"); // 这里就用到了map组件里的 id属性
mpCtx.moveToLocation({
	latitude: that.latitude,
	longitude: that.longitude
});

that.markers = [
    {
        iconPath: '../../static/img/address.png',  //表示点图片 建议使用.png格式
        name: '当前位置', // 点击marker时，出现的信息名
        id: 0, 
        latitude: res.latitude, // 经度 可以通过getLocation api获取
        longitude: res.longitude, //纬度 可以通过getLocation api获取
        width: 25, 
        height: 25, 
        callout: {
            content: '当前位置',
            padding: '10px 5px 10px 5px',
            borderRadius: '12px',
            textAlign: 'center',
            display: 'ALWAYS'
        }
    },
    {
        iconPath: '../../static/img/map_home.png',  //表示点图片 建议使用.png格式
        name: '终点',
        id: 1, 
        latitude: res.latitude, // 经度 可以通过getLocation api获取
        longitude: res.longitude+0.01, //纬度 可以通过getLocation api获取
        width: 40, 
        height: 40,
        callout: {
            content: '终点',
            padding: '10px 5px 10px 5px',
            borderRadius: '12px',
            textAlign: 'center',
            display: 'ALWAYS'
        }
    }
];

that.includePoints = [
    {
        longitude: xxx,
        latitude: xxx
    },
    {
        longitude: xxx,
        latitude: xxx
    }
];

that.polyline = [{
    points: [
        {latitude: xxx, longitude: xxx},
        {latitude: xxx, longitude: xxx}
    ],
    color: "#55bb8a", //线的颜色
    width: 8, //线的宽度
    arrowLine:true, //线内箭头
}];

chooseLocation(e) {
    console.log(e,'----点击选点')
    let that = this;
    qqmapsdk.reverseGeocoder({
        location: {
            latitude: e.detail.latitude,
            longitude: e.detail.longitude,
        },
        success(res1) {
            console.log(res1,'-------逆地址解析')
            that.currentAddress = res1.result.formatted_addresses.recommend;
            that.latitude = res1.result.location.lat;
            that.longitude = res1.result.location.lng;
            // 关键是这个，获取到当前点击的点位之后，调用push方法。
            that.handleAddPoint();
        }
    })
},

handleAddPoint() {
    this.markIndex++; // marker初始id为0，每增加一个点，就加一
    this.markers.push({
        id: this.markIndex,   //id 必填项，有值就行
        width: 25,
        height: 25,
        longitude: this.longitude,
        latitude: this.latitude,
        iconPath: '/static/img/icon_address_3.png'
    });
    // 画线
    this.polyline[0].points.push({
        latitude: this.latitude,
        longitude: this.longitude
    });
    this.pointArr.push({
        lat: this.latitude,
        lng: this.longitude
    });
},

data() {
    return {
        polyline: [{
            points: [],
            color: "#CA6F3A",//线条的颜色
            width: 5,//宽度
            borderWidth: 2,
            borderColor: "#fff"
        }], // 画线初始定义
        markers: [], // 标记点
        markIndex: 0, // 标记点初始id
		pointArr: [], // 传回的电子围栏组
    }
}

import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
var qqmapsdk = new QQMapWX({
	key: '必填'
});

qqmapsdk.reverseGeocoder({
    location: {
        latitude: res.latitude,
        longitude: res.longitude,
    },
    success(res1) {
        ...
    },
    fail(e) {
        ...
    }
})

import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
var qqmapsdk = new QQMapWX({
	key: '必填'
});

// 监听地图拖拽事件
regionchange(e) {
    let that = this;
    let mpCtx = wx.createMapContext("myMap");
    
    // 监听是否是拖拽，并且动作为拖拽结束
    if(e.type == 'end' && e.causedBy == 'drag') {
        // 获取当前地图拖拽结束后，中心点的坐标  （这里是放了一个标识点在地图中心，拖拽地图，让需要获取的点位停留在中心位置，获取坐标）
        mpCtx.getCenterLocation({
            type: 'gcj02',
            success(res) {
                console.log(res,'----center')
                // 调用 接口中逆地址解析方法 获取坐标和位置信息
                qqmapsdk.reverseGeocoder({
                    location: {
                        latitude: res.latitude,
                        longitude: res.longitude,
                    },
                    success(res1) {
                        console.log(res1,'-------逆地址解析')
                        that.currentAddress = res1.result.formatted_addresses.recommend;
                        that.latitude = res1.result.location.lat;
                        that.longitude = res1.result.location.lng;
                    },
                    fail(e) {
                        console.log(e,11122)
                    }
                })
            }
        })
        
    }
},

// 监听输入内容，获取搜索结果
handleSearch(e) {
    console.log(e.detail.value,'----监听输入内容')
    let searchKey = e.detail.value;
    if(searchKey != '') {
        this.mapSearch(searchKey).then( res => {
            console.log(res,'-----返回结果')
            if(res.data.length > 0) {
                this.searchResultList = res.data;
                this.isShowList = true;
            }
        })
    } else {
        this.isShowList = false;
    }
},
// 腾讯地图关键词补充接口
mapSearch(keyword){
    let promise = new Promise(function(resolve, reject) {
        // 调用接口
        qqmapsdk.getSuggestion({
            keyword: keyword, //搜索关键词
            region: '龙岩市',
            success: function (res) {
                resolve(res)
            },
            fail: function (res) {
                reject(res)
            }
        });
    });
    return promise
},

"mp-weixin" : {
    "permission" : {
        "scope.userLocation": {
            "desc": "你的位置信息将用于小程序位置接口的效果展示"
        }
    },
    "requiredPrivateInfos": ["getLocation"]
}

let url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
    url+=`?from=${latitude},${longitude}`;  //起点坐标
    url+=`&to=${latitude},${longitude}`;  //终点坐标
    url+="&key=xxx"; //开发key，可在控制台自助创建

let that = this;

// 这里的请求可以进行封装，或者另起一个方法写入，把url传入。这里就不封装了
uni.request({
    url: url,
    success(res) {
        let coords = res.data.result.routes[0].polyline, pl = [];
        //坐标解压（返回的点串坐标，通过前向差分进行压缩）
        let kr = 1000000;
        for (let i = 2; i < coords.length; i++) {
            coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
        }
        //将解压后的坐标放入点串数组pl中
        for (let i = 0; i < coords.length; i += 2) {
            pl.push({
                latitude: coords[i],
                longitude: coords[i+1]
            });
        }
        //设置连线数组 将接口返回的坐标赋值给points，然后绘制成折线
        that.polyline = [{
            points: pl,
            color: "#55bb8a", //线的颜色
            width: 8, //线的宽度
            arrowLine:true, //线内箭头
        }];
        // 这里是将接口返回的计算距离、时间，赋值给data，如果有用这两个参数的话
        Object.assign(that.dataInfo,{
            distance: res.data.result.routes[0].distance,
            duration: res.data.result.routes[0].duration
        })
    }
})