uniapp中提供导航功能,适配多种地图坐标规范

199 阅读1分钟

在html中加入需要导航的地图列表,这里我们主要以高德和百度为例

<view>
    <el-button @click="onGotoBaidu">百度地图</el-button>
    <el-button @click="onGotoGaode">高德地图</el-button>
    <el-button @click="onGotoClose">取消</el-button>
</div>

js代码中将当前坐标转为符合不同厂商的地图坐标规范

onGotoBaidu: function(){
        const elink = document.createElement('a');
        //将坐标转为高德坐标
        let position = this.changeTianToBaidu(this.form.longitude, this.form.latitude)
        //判断手机类型
        var u = navigator.userAgent;
        // var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        // if (isAndroid) {
        // 	elink.href = 'bdapp://map/direction?origin=' + '&destination=name:|latlng:' + position[1] + ',' +
        // 		position[0] +
        // 		'&coord_type=bd09ll&mode=transit&sy=3&index=0&target=1&src=andr.baidu.openAPIdemo'
        // } else if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 	elink.href = 'baidumap://map/direction?origin=&destination=' + position[1] + ',' + position[0] +
        // 		'&coord_type=bd09ll&mode=driving&src=ios.baidu.openAPIdemo'
        // }
        elink.href = 'http://api.map.baidu.com/marker?location=' + position[1] + ',' + position[0] + '&title=风险点&content=终点&output=html&src=webapp.baidu.openAPIdemo';
        elink.style.display = 'none';
        // elink.onclick = this.checkApp(elink.href);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
},
onGotoGaode: function(){
        const elink = document.createElement('a');
        //将坐标转为高德坐标
        let position = this.changeTianToGaode(this.form.longitude, this.form.latitude)
        //判断手机类型
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = /\(iPad/i.test(u);//ios终端
        elink.href = 'https://uri.amap.com/navigation?from=&to='+ position[0] +','+position[1]+',' + this.form.name + '&callnative=1';
        elink.style.display = 'none';
        elink.onclick = this.checkApp(elink.href);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
},
//将天地图的坐标转为百度坐标
changeTianToBaidu(lng, lat){
        var result = gcoord.transform(
                        [lng, lat],    // 经纬度坐标
                        gcoord.WGS84,               // 当前坐标系
                        gcoord.BD09                 // 目标坐标系
        );
        return result;
},
//将天地图的坐标转为高德坐标
changeTianToGaode(lng, lat){
        var result = gcoord.transform(
                        [lng, lat],    // 经纬度坐标
                        gcoord.WGS84,               // 当前坐标系
                        gcoord.GCJ02                 // 目标坐标系
        );
        return result;
},