百度地图开发API记录

地图与数据库交互：经纬度逆解析与地址管理

最新推荐文章于 2024-02-14 12:40:33 发布

原创

最新推荐文章于 2024-02-14 12:40:33 发布 · 641 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #百度 #vue

本文介绍了如何实现数据库中的经纬度地址逆解析，并详细阐述了地图应用中从文本输入地址到数据库存储的过程。重点讨论了在iframe中父页面与子页面数据交互的难点，包括axios传递中文参数避免乱码的方法以及使用Baidu地图API进行地址标注。同时，提出了将数据库地址列表展示在地图上的两种思路，并展示了如何通过DOM操作获取表格数据。

1.需求

(1) 实现数据库经纬度地址逆解析

(2) 地图文本输入地址添加到数据库

2.难点

(1) 地址添加子页面 address_add.html

关键字输入 https://lbsyun.baidu.com/jsdemo.htm#a6_2https://lbsyun.baidu.com/index.php?title=jspopular/guide/geocoding

map.clearOverlays();    //清除地图上所有覆盖物

父页面manage_address.html调用子页面address_add.html数据

<iframe src="address_add.html" name="address_add" scrolling="no" frameborder="0" width="100%" height="400px"></iframe>
                    
//子页面 地图添加传参
this.addressName = address_add.window.myValue;  //地址名称
this.lat = address_add.window.pp.lat;           //纬度
this.lng = address_add.window.pp.lng;           //经度

axios.post传递中文乱码(地址名称)

 //此方法传参map接收  不会乱码
                    axios.post("/orderlist/addAddress.do", {
                            addressName:this.addressName,lat:this.lat ,lng: this.lng
                        }

                        //addressName 此方法中文乱码
                        //axios.post("/orderlist/addAddress.do?addressName=" + this.addressName +"&lat=" + this.lat +"&lng=" + this.lng ,

                        //axios.post("/orderlist/addAddress.do", addressData,
                        // {
                        //     /

最低0.47元/天解锁文章