uniapp:跳转第三方地图

最新推荐文章于 2025-06-10 18:15:53 发布

_木棠

最新推荐文章于 2025-06-10 18:15:53 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app

本文链接：https://blog.csdn.net/Ygaidi/article/details/144839495

1.跳转第三方高德地图

//跳转地图
toMap(item){
	uni.navigateTo({
		url: (window.location.href = `https://uri.amap.com/navigation?to=${item.lng},${item.lat},${item.shopName}&mode=car&policy=1&src=https://gawl.gazhcs.com/wap/index.html&callnative=0`)
	})
},

2.可选择第三方地图

// 地图
headMap(e){
  uni.openLocation({
	longitude: Number(e.F_lng),
	latitude: Number(e.F_Lat),          
	name: e.F_FullName, // 位置名称
	address: e.F_Address, // 位置地点
	success: function (res) {
		console.log('打开系统位置地图成功')
	},
	fail: function (error) {
		console.log(error)
	},
  })
},

h5端（小程序端会直接换起第三方地图选择，直接跳转第三方地图app）

3.搜索地图及周边

1.引用腾讯地图文件及key值


//引入SDK核心类
var QQMapWX = require('../../assert/qqmap-wx-jssdk.min.js');
// 实例化API核心类
var qqmapsdk = new QQMapWX({
	key: 'key_zhi' // 必填
});

2.搜索请求

// 搜索附近交通
async searchNearbyTransit() {
	try {
		const keyword = this.ggtitle; // 搜索关键词，可以是多个用'|'分隔
		console.log(keyword)
		const response = await new Promise((resolve, reject) => {
		    this.qqmapsdk.search({
			    keyword: keyword,
			    location: `${this.latitude},${this.longitude}`, // 当前位置坐标
			    radius: 1000, // 搜索半径，单位：米
			    success: resolve,
		    	fail: reject,
		    });
		});

		this.nearbyTransports = response.data || [];
		if(this.nearbyTransports.length == 0){
			uni.showToast({
				title:'暂无数据',
				icon:'none',
				duration:2000
			})
		}
		console.log('附近交通设施:', this.nearbyTransports);
	} catch (error) {
		uni.showToast({
			title:'请求key今日已达上限！',
			icon:'none',
			duration:2000
		})
		console.error('搜索附近交通设施失败:', error);
	}
},

3.点击切换不同搜索请求

tab(e) {
   this.active = e
   if(e == 1){
	  this.ggtitle = '公交站|地铁站'
   }else if(e == 2){
	  this.ggtitle = '风景名胜'
   }else if(e == 3){
		this.ggtitle = '餐饮'
   }else if(e == 4){
		this.ggtitle = '商店超市'
   }
	this.searchNearbyTransit()
}