阅读 82

基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续

这是我参与8月更文挑战的第26天,活动详情查看:8月更文挑战

写在前面:

  • 本文作为本人学习总结之用,同时分享给大家~
  • 个人前端博客网站:zhangqiang.hk.cn
  • 欢迎加入博主的前端学习qq交流群::706947563专注前端开发,共同学习进步

基于百度地图api获取某一点的详细信息 逆向解析地址 - 后续

经过今天的不断努力终于获取到了地图位置坐标的逆向解析地址!

直接把下面这个链接赋值到浏览器就可以得到返回值

https://api.map.baidu.com/reverse_geocoding/v3/?ak=GXn1gkhgbbWet55NCyKzjB7Hqfdh3gos&output=json&coordtype=wgs84ll&location=31.225696563611,121.49884033194

GET请求

获取的值如下:

{
	"status": 0,
	"result": {
		"location": {
			"lng": 121.50989077799084,
			"lat": 31.22932842411674
		},
		"formatted_address": "上海市黄浦区中山南路187",
		"business": "外滩,陆家嘴,董家渡",
		"addressComponent": {
			"country": "中国",
			"country_code": 0,
			"country_code_iso": "CHN",
			"country_code_iso2": "CN",
			"province": "上海市",
			"city": "上海市",
			"city_level": 2,
			"district": "黄浦区",
			"town": "",
			"town_code": "",
			"adcode": "310101",
			"street": "中山南路",
			"street_number": "187",
			"direction": "东北",
			"distance": "91"
		},
		"pois": [],
		"roads": [],
		"poiRegions": [],
		"sematic_description": "",
		"cityCode": 289
	}
}
复制代码

官网文档如下:

lbsyun.baidu.com/index.php?t…

详细解说

1 注册百度地图开发者,拥有自己的ak;

2 参考上面的文档自己写个接口,发送GET请求,axios、fetch、ajax都可以,将得到的返回值显示在自己的想要显示的位置即可。

注:本人在使用react dva 的 fetch请求这个地址,需要使用代理才能解决,不知道啥原因,所以也在这里记录一下。

/**
 * 在生产环境 代理是无法生效的,所以这里没有生产环境的配置
 */
 export default {
  dev: {  
    '/baiduMap': {
      target: 'https://api.map.baidu.com/reverse_geocoding/v3/?ak=',
      changeOrigin: true,
      pathRewrite: { '^/baiduMap': '' },
    },
  },
};
 
复制代码
文章分类
前端
文章标签