uniapp 微信小程序如何在地图上跳转到指定坐标,或者在高德或者百度地图中前去导航

骑猪看日落 2021-07-25 11:21 899阅读 0赞

这块最开始我刚做的时候想的比较复杂,是不是需要引用高德,或者百度的地图api 啥的,其实这块完全没必要,简单几句代码就ok.  
这块要用到的uniapp的方法 **uni.openLocation** ,具体参数的信息可以去官网上查看一下

直接看代码吧  
**html**

**js**

data() { 
    			return { 
    				latitude:'35.227318',//纬度，范围为-90~90，负数表示南纬，使用 gcj02 国测局坐标系
    				longitude:'114.113027',// 经度，范围为-180~180，负数表示西经，使用 gcj02 国测局坐标系
    				storeName:'东娄庄村',//这块市你坐标值的目的地 名字也可以自定义
    				address:'河南省新乡市延津县榆林乡东娄庄村',//这块市地址的详细描述可以自定义
    				
    			}
    		},
    		onLoad() { 
    			
    		},
    		methods: { 
    			//导航 先跳转的是小程序的默认地图
    			goMap() { 
    				uni.openLocation({ 
    					latitude: this.latitude,//维度
    					longitude: this.longitude,//经度
    					scale: 18,//缩放比例，范围5~18，默认为18
    					name:this.storeName,//地址名称
    					address:this.address,//地址详情
    				})
    			},
    	
    	}

如下图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]  
**然后点击绿色的按钮就可以进行导航 如下图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/190fc42e8f404113af40f62e59285fe3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/d30f4e71617c430bb4461c50fd7b1660.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NMaWZlNDU5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210725/d1076cb536864080922d65ac5fb085d0.png