百度地圖API實現批量地址解析

時間 2019-11-11

標籤百度地圖 api 實現批量地址解析简体版

原文原文鏈接

1.前言javascript

寫這篇文章的緣由是最近作一個GIS項目在網上爬取了一些數據，無奈只有地址的文字信息沒有座標信息，如何把信息顯如今地圖上呢？很糾結啊，查看了一下百度地圖API驚奇的發現百度提供了地址解析的API，而後查看了他的Demo後豁然開朗，因此動手將本身的文字信息數據進行解析座標信息。下面開始講解。css

2.方案html

（1）本身數據庫中的數據java

（2）百度地圖API Demojquery

<!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:300px;width:100%;}
        #r-result{width:100%; font-size:14px;line-height:20px;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jSVkiBOGSsNh69VzlhaHReHVuZvWvzNA"></script>
</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 type="text/javascript">
    // 百度地圖API功能
    var map = new BMap.Map("l-map");
    map.centerAndZoom(new BMap.Point(117.269945,31.86713), 13);
    map.enableScrollWheelZoom(true);
    var index = 0;
    var myGeo = new BMap.Geocoder();
    var adds = [
        "包河區金寨路1號（金寨路與望江西路交叉口）",
        "廬陽區鳳台路209號（鳳台路與蒙城北路交叉口）",
        "蜀山區金寨路217號(近安醫附院公交車站)",
        "蜀山區梅山路10號(近安徽飯店) ",
        "蜀山區 長豐南路159號銅鑼灣廣場312室",
        "合肥市壽春路93號錢櫃星樂町KTV（逍遙津公園對面）",
        "廬陽區長江中路177號",
        "新站區勝利路89"
    ];
    function bdGEO(){
        var add = adds[index];
        geocodeSearch(add);
        index++;
    }
    function geocodeSearch(add){
        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)}));
            }
        }, "合肥市");
    }
    // 編寫自定義函數,建立標註
    function addMarker(point,label){
        var marker = new BMap.Marker(point);

View Code

效果：ajax

（3）本身的實現數據庫

爲了方便我直接使用Asp.net MVC +EF 快速實現api

因爲數據量過多我選擇了分頁顯示，默認每頁顯示1000條ide

控制器代碼：函數

//頁面

public ActionResult Index()
     {
         return View();
     }
       [HttpPost]
     public JsonResult GetPage(int page)
       {
           //EF實體類
           FindChildDataEntities db = new FindChildDataEntities();
           //分頁
         var missPlaces=   db.ChildInfo.Where(c=>c.MissPlace!="").OrderBy(c=>c.Id).
            Skip((page - 1) * 1000).Take(1000).Select(c=>new { missPlace = c.MissPlace });

//返回數據到前臺
         return Json(missPlaces, JsonRequestBehavior.AllowGet);
       }
}

View Code

Index視圖頁面視圖頁使用AJAX進行數據交互

<!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>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=jSVkiBOGSsNh69VzlhaHReHVuZvWvzNA"></script>
    <script type="text/javascript">
        // 百度地圖API功能
        var map;
        $(function () {
             map = new BMap.Map("l-map");
            map.centerAndZoom(new BMap.Point(114.93896484, 25.85428033), 15);
            map.enableScrollWheelZoom(true);
        });

        function PostAfter(msg) {
            var index = 0;
            var myGeo = new BMap.Geocoder();
            var adds = [];
            $(msg).each(function (i, item) {
                adds[i]=item['missPlace'];
            });

            for (var i = 0; i < adds.length; i++) {
                var add = adds[i];
                geocodeSearch(add,i);
            }

            function geocodeSearch(add, index) {
                if (index < adds.length) {
                    setTimeout(window.bdGEO, 100);
                }
                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) }));
                    }
                }, "");
            }
            // 編寫自定義函數,建立標註
            function addMarker(point, label) {
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                marker.setLabel(label);
            }
        }
</script>
</head>

<body>
    <div id="l-map"></div>
    <div id="r-result">
           @using (Ajax.BeginForm("GetPage", "Coding", new AjaxOptions()
           {
               OnSuccess = "PostAfter"
           }))
           {
               
               <span>頁碼：</span>
               <input type="text" value="" name="page" style="width:40px">
                  <input type="submit" value="批量地址解析" />
           }
        <div id="result"></div>
    </div>
</body>
</html>