百度地图API实现批量地址解析

时间：2016-06-05 12:21:57 收藏：0 阅读：4666

1.前言

写这篇文章的原因是最近做一个GIS项目在网上爬取了一些数据，无奈只有地址的文字信息没有坐标信息，如何把信息显现在地图上呢？很纠结啊，查看了一下百度地图API惊奇的发现百度提供了地址解析的API，然后查看了他的Demo后豁然开朗，所以动手将自己的文字信息数据进行解析坐标信息。下面开始讲解。

2.方案

（1）自己数据库中的数据

（2）百度地图API Demo

<!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

效果：

技术分享

（3）自己的实现

为了方便我直接使用Asp.net MVC +EF 快速实现

由于数据量过多我选择了分页显示，默认每页显示1000条

控制器代码：

//页面

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>

View Code

显示第一页的1000条数据

技术分享

坐标数据：

技术分享

3.结束

本次实现百度地图API批量地址解析，解析的精度还行，满足我们项目的需求。也没什么代码量，就不贴代码啦.有问题可以私信我....

期待您的关注……….

博客首发地址：博客园http://www.cnblogs.com/ATtuing

欢迎转载....