小程序:定位具体位置和显示相应城市名称

超、凢脫俗 2023-01-03 01:29 262阅读 0赞

问题:  
uniapp 内置方法`uni.getLocation`在小程序中 只能获取到经纬度, 不能获取到具体的城市名称  
`uni.getLocation`: https://uniapp.dcloud.io/api/location/location

uni.getLocation({ 
        type: 'wgs84',
        success: function (res) { 
            console.log('当前位置的经度：' + res.longitude);
            console.log('当前位置的纬度：' + res.latitude);
        }
    });

![在这里插入图片描述][2021010616525021.png]

所以需要用经纬度获取相对应的城市名称(百度地图, 高德地图)  
高德地图 : https://ask.dcloud.net.cn/article/35070

**以下用的是百度地图的方法:**

1.  注册百度地图账号,获取**ak**  
    打开百度地图开放平台，导航栏处选择 “开发文档” > “微信小程序JavaScript API”，在“入门指南”处有详细介绍怎么生成密钥ak  
    具体操作请访问地址: http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key  
    ![在这里插入图片描述][20210106164126876.png]  
    查看ak: http://lbsyun.baidu.com/apiconsole/key\#/home  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg1Mjc2NQ_size_16_color_FFFFFF_t_70]
2.  使用小程序的账号登录微信公众平台(https://mp.weixin.qq.com/)，在“开发” 中选择 “开发管理”，把百度地图api的url添加到request合法域名中  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg1Mjc2NQ_size_16_color_FFFFFF_t_70 1]  
    代码:

// 根据经纬度获取地名
    location(latitude,longitude){ 
    	uni.request({ 
    		url: 'http://api.map.baidu.com/reverse_geocoding/v3/?ak=1rbWRy3RmGLeBB3KBj42FivR64PFejd3&location=' + latitude + ',' + longitude + '&output=json',
    		data: { },
    		header: { 
    			'Content-Type': 'application.json'
    		},
    		success: res => { 
    			console.log(res.data)
    			if(res && res.data){ 
    				let city = res.data.result.addressComponent.city
    				this.city = city.substr(0,city.length - 1)
    			}
    		}
    	})
    }

打印结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg1Mjc2NQ_size_16_color_FFFFFF_t_70 2]

[2021010616525021.png]: /images/20221119/532f55cb28154f44902bc087ad63ccff.png
[20210106164126876.png]: /images/20221119/88acf6a01b444d54bb102c3969037326.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg1Mjc2NQ_size_16_color_FFFFFF_t_70]: /images/20221119/9df28fe67a184f198e09c9a6a4def5fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg1Mjc2NQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/9b197e661ae042d982ab42b9a5436114.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg1Mjc2NQ_size_16_color_FFFFFF_t_70 2]: /images/20221119/654db85eeb9e4835be50e07d964808d8.png