【项目实战】---地址定位（百度地图）

前言：

最近这两天在项目中接触了根据输入地址的定位的需求。大体的来说，是在添加时根据输入的大致地址定位到百度地图对应的位置，在百度地图显示的相关定位中选取具体的地址后，将详细地址和经纬度传回到页面，然后再保存到数据库中。如果是修改，则根据经纬度定位到地图中精确的一个位置，修改后再新的保存地址和经纬度。

分析：

这个过程的实现是借助百度地图开发平台来实现的。开发平台中有很多种类型，比如Web开发，Android开发，IOS开发，服务接口、工具支持等等。这次我借助Web开发当中的JavaScript API来实现的。具体的主要应用到了关键字检索、逆地址解析、根据经纬度定位和添加纯文字的信息窗口。还有一点，在开发时要用的一个属于自己的“密钥”，要提前去申请。

密钥申请：

登录自己的百度账号，在百度地图开发平台的首页点击右上--API控制台中，根据提示：创建应用，即可获取到访问应用的AK,也就是所谓的密钥。

功能实现：

关键代码：

 //定位按钮，显示地图    $('#btnMap').click(function () {        var Address = $('#txtAddress').textbox('getValue');//获页面上地址控件值        var GPS = $('#txtGPS').textbox('getValue');  //获取页面上经纬度控件值（隐藏了）        if (Address == "") {            $.messager.alert("系统提示", '请输入客户地址', "info", function () {                $('#txtAddress').next('span').find('input').focus();//获取焦点            });            return;        }        $('#map').window('open');//打开地图显示窗口        showMap(Address,GPS);//调用显示地图方法    })    //showMap方法    function showMap(Address, GPS) {        if (isAddOrChange == "Add") {//添加            $('#map').window('open');            // 百度地图API功能            var map = new BMap.Map("allmap");            var firstlng = 116.404;            var firstlat = 39.915;            var point = new BMap.Point(firstlng, firstlat);            map.centerAndZoom(point, 11);            //关键字检索定位            var local = new BMap.LocalSearch(map, {                renderOptions: { map: map }            });            local.search(Address);            //地理编码            var geoc = new BMap.Geocoder();            //地图点击事件-添加点击地图监听事件，点击地图后显示当前经纬度和地址            map.addEventListener("click", showInfo);            function showInfo(e) {                lngLat = e.point.lng + ", " + e.point.lat;//获取经纬度                //逆地址解析                var pt = e.point;                geoc.getLocation(pt, function (rs) {                    var addComp = rs.addressComponents;                    addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;//获取地址                });            }        }        else {//修改            // 百度地图API功能            var map = new BMap.Map("allmap");            var GPS = $('#txtGPS').textbox('getValue');            var arr = new Array();            arr = GPS.split(",");            var firstlng = arr[0];            var firstlat = arr[1];            var point = new BMap.Point(firstlng, firstlat);            map.centerAndZoom(point, 15);            map.enableScrollWheelZoom(true);            // 用经纬度设置地图中心点            if (firstlat != "" && firstlng != "") {                var marker = new BMap.Marker(point);  // 创建标注                map.addOverlay(marker);              // 将标注添加到地图中                map.panTo(point);            }                        var opts = {                width: 200,     // 信息窗口宽度                height: 100,     // 信息窗口高度                title: "地址", // 信息窗口标题                enableMessage: true,//设置允许信息窗发送短息            }            //地理编码            var geoc = new BMap.Geocoder();            //地图点击事件-添加点击地图监听事件，点击地图后显示当前经纬度和地址            map.addEventListener("click", showInfo);            function showInfo(e) {                lngLat = e.point.lng + ", " + e.point.lat;                //逆地址解析                var pt = e.point;                geoc.getLocation(pt, function (rs) {                    var addComp = rs.addressComponents;                    //$.messager.alert("地址", addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);                    addr = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;                                    var infoWindow = new BMap.InfoWindow(addr, opts);  // 创建信息窗口对象                     var point =new BMap.Point(e.point.lng, e.point.lat);                    map.openInfoWindow(infoWindow, point); //开启信息窗口                });            }        }          }

效果图：

1、输入要定位的大致地址，点击定位。

2、点击定位后，跳转到定位管理页面，显示地图，以及根据地址定位到的相关位置。更加需要选取定位到的精确位置，确定后返回。

3、返回的地址（经纬度是隐藏控件，没显示，改地址所显示的经纬度是116.366256, 40.04465）

4、修改时，更加地址对应的经纬度定位到一个具体的位置

5、根据经纬度定位到唯一地址。

总结：

刚开始接触的时候，觉着很难，其实仔细去看，百度地图开发平台给我们封装的特别好，我们只需求要按照给出的Demo来做就好。很简单，很快就能完成，相信自己没问题的。初次做可能存在着一些不足，还望大家见谅。希望能帮到大家。

留下种子：JavaScript API