H5 腾讯地图地址逆解析

Posted 2022-04-20 沿着路走到底

安装 vue-jsonp

main.js

import  VueJsonp  from 'vue-jsonp'
Vue.use(VueJsonp)

业务页面

this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/', 
	key: 'xxx',
	location: `$latitude,$longitude`,
	output: 'jsonp'
)

微信公众号页面跳转第三方地图页面

uni.showActionSheet(
					itemList: ['腾讯地图', '百度地图', '高德地图'],
					success: (res) => 
						console.log('res', res)
						let url = ''
						if (res.tapIndex == 0) 
							url = `https://mapapi.qq.com/web/mapComponents/locationMarker/v/index.html?marker=coord:$this.latitude,$this.longitude;title:$this.nearShopInfo.commercialAddress;addr:"$this.nearShopInfo.commercialAddress"&referer=,tengxun&key=xxx&ch=uri-api&ADTAG=uri-api.other`
						 else if (res.tapIndex == 1) 
							url = `https://map.baidu.com/mobile/webapp/place/marker/qt=inf&vt=map&act=read_share&code=289/third_party=uri_api&point=$this.longitude|$this.latitude&title=$this.nearShopInfo.commercialAddress&content=$this.nearShopInfo.commercialAddress`
						 else if (res.tapIndex == 2) 
							url = `https://m.amap.com/share/index/lnglat=$this.longitude,$this.latitude&name=$this.nearShopInfo.commercialAddress&src=uriapi&innersrc=uriapi`
						
						
						location.href = url
					,
					fail: function (res) 
						console.log(res.errMsg);
					
				)

将其他地图厂商的坐标转换成腾讯的坐标

WebService API | 腾讯位置服务

this.$jsonp('https://apis.map.qq.com/ws/coord/v1/translate', 
					key: 'xxx',
					locations: `$latitude,$longitude`,
					type: 3,
					output: 'jsonp'
				)
				.then(res => 
					console.log('getQQloaction', res)
					this.latitude = res.locations[0].lat
					this.longitude = res.locations[0].lng
					this.covers = [
						latitude: this.latitude,
						longitude: this.longitude,
						iconPath: '../../static/official/pos.png',
						width: 25,
					]
				)

1