在springboot项目上跑百度地图批量地址解析_spring boot thymeleaf整合百度地图并查询数据库中的地址-优快云博客

本文介绍了一个基于百度地图API的应用案例，通过批量解析地址并将其标记在地图上，展示了如何使用JavaScript进行地理编码和地图操作。此应用涵盖了地址解析、地图标记及自定义函数的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>批量地址</title>
    <style type="text/css">
      body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
      #l-map{height:500px;width:100%;}
      #r-result{width:100%; font-size:14px;line-height:20px;}
    </style>
    <!-- 百度地图 -->
    <link rel="stylesheet" type="text/css" href="/js/yzmap/baidumapv2/css/DrawingManager_min.css" />
    <link rel="stylesheet" type="text/css" href="/js/yzmap/baidumapv2/css/baidu_map_v2.css" />
</head>
<body>
<div id="l-map"></div>
<div id="r-result">
    <input type="button" value="批量地址解析" onclick="bdGEO()" />
    <div id="result"></div>
</div>
</body>
</html>
<!--<script src="jquery-1.11.2.min.js"></script>-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/yzmap/baidumapv2/baidumap_offline_v2_load.js"></script>
<script type="text/javascript" src="js/yzmap/baidumapv2/tools/OfflineTransform.js"></script>
<script type="text/javascript" src="js/yzmap/baidumapv2/tools/DrawingManager_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=7B2p6ahZbAyfGkHGqz6Aq4oVYF9FDyvH"></script>
<script type="text/javascript">
        var lng1 = 112.956841;
        var lat1 = 28.231173;
        var map = new BMap.Map("l-map"); //创建一个地图对象
        window.map = map; //将地图对象设为全局变量地图
        var point = new BMap.Point(lng1, lat1); //定位
        map.centerAndZoom(point, 12); //地图初始化
        map.enableScrollWheelZoom(); //启动滚轮缩放
        map.addControl(new BMap.OverviewMapControl({
            isOpen: false,
            anchor: BMAP_ANCHOR_BOTTOM_RIGHT
        }));
        var styleJson = []
        map.setMapStyle({
            styleJson: styleJson
        });
    var index = 0;
    var adds = [
        "湖南省长沙市岳麓区望月湖街道麓山才苑E栋一单元",
        "四方坪街道长沙市开福区浏阳河路金地园7栋405",
        "岳麓区溁湾镇",
        "长沙市政府办公大楼"
    ];
    function bdGEO() {
        if (index < adds.length) {
        var add = adds[index];
        var myGeo = new BMap.Geocoder();
        if (index < adds.length) {
            setTimeout(window.bdGEO, 400);
        }
        myGeo.getPoint(add, function (point) {
            if (point) {
            document.getElementById("result").innerHTML += index + "、" + add + ":" + point.lng + "," + point.lat + "</br>";
            var address = new BMap.Point(point.lng, point.lat);
            addMarker(address, new BMap.Label(index + ":" + add, {offset: new BMap.Size(20, -10)}));
            }
        }, "长沙市");
        index++;
    }}
    // 编写自定义函数,创建标注
    function addMarker(point,label){
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
    }
</script>