百度地图开发API记录

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

IT__LS

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

阅读量508

点赞数

分类专栏： JAVA SpringBoot 文章标签： elementui 百度 vue

本文链接：https://blog.csdn.net/IT__LS/article/details/119868088

版权

JAVA 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

SpringBoot

8 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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,
                        // {
                        //     //responseType: 'json',
                        //     //dataType:'json',
                        //     //contentType: "application/json; charset=utf-8",
                        //     headers: {
                        //         'content-type': 'application/x-www-form-urlencoded；charset=UTF-8'
                        //     },
                        //     //data: JSON.stringify(addressData),
                        // }
                    ).then((res) => {


//后台接收
//新增地址
    @RequestMapping("/addAddress")
    public Result addAddress(@RequestBody Map map){
        try{
            String addressName = map.get("addressName").toString();
            String lat = map.get("lat").toString();
            String lng = map.get("lng").toString();
            orderService.addAddress(addressName,lat,lng);
......

XML文件 sql语句塞值传递多个参数

//dao文件

public void addAddress(@Param("addressName") String addressName, @Param("lat") String lat, @Param("lng") String lng);


<!-xml   注意参数名字对应-->
    <!--插入地址坐标数据-->
    <insert id="addAddress" parameterType="String">
        <selectKey resultType="java.lang.Integer" order="AFTER" keyProperty="id">
            SELECT LAST_INSERT_ID()
        </selectKey>
        insert into t_address(addressName,latitude,longitude)
        values (#{addressName},#{lat} ,#{lng})
    </insert>

(2) 数据库地址逆地址解析分布图

思路一:如何将数据库地址列表由父页面manage_address.html传到子页面address.html?
思路二:子页面address.html调用父页面manage_address.html地址数据dataList?

子页面只能调用父页面在此iframe前面的变量和函数

解决思路:通过el-table-column 中的class-name的属性抓取对应数据https://cloud.tencent.com/developer/section/1489885
dataList是后台查询出的总数据

manage_address.html

<el-table name="dataList" size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                                    <el-table-column type="index" align="center" label="序号"></el-table-column>
                                    <el-table-column prop="id" label="公司序号" align="center"></el-table-column>
                                    <el-table-column class-name="addressName" prop="addressName" label="公司地址" align="center"></el-table-column>
                                    <el-table-column class-name="longitude" prop="longitude" label="所在经度" align="center"></el-table-column>
                                    <el-table-column class-name="latitude" prop="latitude"  label="所在纬度" align="center"></el-table-column>
                                    <el-table-column label="操作" align="center">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="danger" @click="handleCancel(scope.row)">删除</el-button>
                                        </template>
                                    </el-table-column>

address.html

通过window.parent.document.getElementsByName方法取得父页面数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你自己的密钥(我的不给你hhh)"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title>逆地址解析</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #result{
            position: fixed;
            top: 10px;
            left: 10px;
            padding: 0px 7px;
            min-width: 350px;
            height: 70px;
            line-height: 35px;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
    </style>
</head>
<body>

<div id='container'></div>
<!--<div id='result'>-->
<!--    点击展示详细的地址：-->
<!--    <div id='result_l'></div>-->
<!--</div>-->
<script>
    //el-table__body
    //window.onload=function(){
        var addressDataStr = window.parent.document.getElementsByName("dataList")[0].getElementsByClassName("el-table__body")[0].getElementsByClassName("addressName");
        // 11上海虹桥国际机场121.34536743164062 31.19283276425548删除222上海市黄浦区上海大剧院121.47839931.235344删除323上海市黄浦区上海博物馆121.4822331.234143删除

        // var addressName = addressDataStr.replace(/[^\u4e00-\u9fa5]/gi, "").split("删除");
        // addressName.pop();
        //
        var addressName = [];
        var lat = [];
        var lng = [];
        //
        //var latlngList=addressDataStr.split("删除");
        //latlngList.pop();
        for (let i = 0; i < addressDataStr.length; i++) {
            addressName[i]= addressDataStr[i].innerText;
        }
        console.log(addressName);

        //经度
        var lngDataStr = window.parent.document.getElementsByName("dataList")[0].getElementsByClassName("el-table__body")[0].getElementsByClassName("longitude");
        for (let i = 0; i < addressDataStr.length; i++) {
            lng[i]= lngDataStr[i].innerText;
        }
        console.log(lng);

        //纬度
        var latDataStr = window.parent.document.getElementsByName("dataList")[0].getElementsByClassName("el-table__body")[0].getElementsByClassName("latitude");
        for (let i = 0; i < addressDataStr.length; i++) {
            lat[i]= latDataStr[i].innerText;
        }
        console.log(lat);

    //}


    // //父页面的属性和方法必须在iframe标签之前
    // var test1 = parent.p;
    // console.log(test1);

    //实例化地图
    var map = new BMapGL.Map('container');
    //map.centerAndZoom(new BMapGL.Point(121.34262084960938,31.188721039313997), 12);
    map.centerAndZoom('上海市', 12); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    map.enableScrollWheelZoom();
    //设置地图显示元素
    map.setDisplayOptions({
        poi: true       //是否显示POI信息
    })

    for (let i = 0; i < addressName.length; i++) {

        var geoc = new BMapGL.Geocoder();

            //map.addEventListener('click', function(e) {
                //var pt = e.latlng;
                var pt = '';
                var marker = new BMapGL.Marker(new BMapGL.Point(lng[i], lat[i]));
                map.addOverlay(marker);

                geoc.getLocation(pt, function (rs) {
                    //var addComp = rs.addressComponents;

                    //var addressName = rs.surroundingPois;
                    //var addressName = rs.address;

                    var opts = {
                        position: new BMapGL.Point(lng[i], lat[i]), // 指定文本标注所在的地理位置
                        offset: new BMapGL.Size(30, -30) // 设置文本偏移量
                    };
                    // 创建文本标注对象
                    //var label = new BMapGL.Label(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber, opts);
                    var label = new BMapGL.Label(addressName[i], opts);

                    // 自定义文本标注样式
                    label.setStyle({
                        color: 'blue',
                        borderRadius: '5px',
                        borderColor: '#ccc',
                        padding: '10px',
                        fontSize: '16px',
                        height: '30px',
                        lineHeight: '30px',
                        fontFamily: '微软雅黑'
                    });
                    map.addOverlay(label);
                })
    }


</script>
</body>
</html>

IT__LS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
百度地图开发API记录

1.需求(1) 实现数据库经纬度地址逆解析(2) 地图文本输入地址添加到数据库2.难点(1) 地址添加子页面 address_add.html 关键字输入 https://lbsyun.baidu.com/jsdemo.htm#a6_2 map.clearOverlays(); //清除地图上所有覆盖物父页面manage_address.html调用子页面address_add.html数据<iframe src="address_...
复制链接

扫一扫

专栏目录