根据地址获取百度地图经纬度

效果图：

 

1，引入用到的js

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>

2，查询按钮以及存放结果的html

<div class="row">
  <div class="col-md-12">
    <div class="form-group">
       <input type="button" class="btn btn-default btn-sm" value="查询经纬度" onclick="searchByStationName()" /><br/>
        <table id="result_" class="table table-bordered" border="1" width="100%" cellspacing="0" cellpadding="1"></table>
        <div id="container"></div>
        <!--存放所需经度，纬度-->
        <input type="hidden" id="longitude" name="longitude" />
        <input type="hidden" id="latitude" name="latitude"/>
     </div>
   </div>
</div>

3，查询内容：城市、街道详细地址

<div class="row">
  <div class="col-md-2">
    <div class="form-group">
       <label>选择城市</label>
       <select class="form-control select2" id="province" name="provinceCode" onchange="citySelect()"></select>
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-group">
      <label>&nbsp;</label>
      <select class="form-control select2" id="city" name="cityCode" onchange="countySelect()"></select>
    </div>
  </div>
  <div class="col-md-2">
     <div class="form-group">
       <label>&nbsp;</label>
       <select class="form-control select2" id="county" name="countyCode" onchange="getproviceAndCityAndCounty()"></select>
     </div>
   </div>

  <div class="col-md-2">
     <div class="form-group">
       <label>&nbsp;</label>
       &nbsp;
     </div>
  </div>

  <div class="col-md-4">
     <div class="form-group">
        <label>&nbsp;</label>
        <input type="text" class="form-control" readonly="readonly" id="proviceAndCityAndCounty"/>
     </div>
   </div>
</div>


<div class="row">
  <div class="col-md-12">
    <div class="form-group">
       <label>街道详细地址</label>
       <textarea id="street" name="street" class="textarea" placeholder="街道详细地址.." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
     </div>
  </div>
</div>

4，根据地址查询经纬度js

//百度地图查询经纬度
function searchByStationName() {
    var map = new BMap.Map("container");
    var localSearch = new BMap.LocalSearch(map);

    $("#result_").html('<tr><td>查找名称</td><td>结果名称</td><td>地址</td><td>经度</td><td>维度</td></tr>')

    var proviceAndCityAndCounty=$("#proviceAndCityAndCounty").val();//省市区名
    var street=$("#street").val();//街道详细地址
    var keyword =proviceAndCityAndCounty+'-'+street; //要搜索的地址内容

    var list = keyword.split('-')
    for (var i = 0; i < list.length; i++) {
        map.clearOverlays(); //清空原来的标注
        localSearch.setSearchCompleteCallback(function(searchResult) {
            var poi = searchResult.getPoi(0);
            var html = '';
            if (poi) {
                html += '<tr><td>' + searchResult.keyword
                html += '</td><td>' + poi.title
                html += '</td><td>' + poi.address
                html += '</td><td>' + poi.point.lng
                html += '</td><td>' + poi.point.lat + '</td></tr>'

                //给经纬度赋值
                $("#longitude").val(poi.point.lng);
                $("#latitude").val(poi.point.lat);
            }

            $("#result_").append(html)
        });

        localSearch.search(list[i]);
    }
}

5，省市级联js

jQuery(function ($) {
    provinceSelect();
});

//省下拉选赋值
function provinceSelect() {
    $.ajax({
        url: pt.base + "area/queryShengInfo.dd?" + Math.random(),
        type: "post",
        data: {},
        dataType: "json",
        async: false,
        success: function (result) {
            dataa = result.data;
            var str = '';
            $.each(dataa, function (i) {
                str += '<option value="' + dataa[i].id + '">' + dataa[i].name + '</option>'
            });
            $('#province').html(str);
            citySelect();
        }
    });
}

//市
function citySelect() {
    var shengCode = $("#province").val();
    $.ajax({
        url: pt.base + "area/queryShiInfo.dd?" + Math.random(),
        type: "post",
        dataType: "json",
        async: false,
        data: {shengCode: shengCode},
        success: function (result) {
            dataa = result.data;
            var str = '';
            $.each(dataa, function (i) {
                str += '<option value="' + dataa[i].id + '">' + dataa[i].name + '</option>'
            });
            $('#city').html(str);
            countySelect();
        }
    });
}

//县
function countySelect() {
    var shiCode = $("#city").val();
    $.ajax({
        url: pt.base + "area/queryXianInfo.dd?" + Math.random(),
        type: "post",
        dataType: "json",
        async: false,
        data: {shiCode: shiCode},
        success: function (result) {
            dataa = result.data;
            var str = '';
            $.each(dataa, function (i) {
                str += '<option value="' + dataa[i].id + '">' + dataa[i].name + '</option>'
            });
            $('#county').html(str);
            getproviceAndCityAndCounty();
        }
    });
}

//获取城市中文值并清空经纬度
function getproviceAndCityAndCounty() {
    var provice = $("#province").find("option:selected").text();
    var city = $("#city").find("option:selected").text();
    var county = $("#county").find("option:selected").text();

    $("#proviceAndCityAndCounty").val(provice+'-'+city+'-'+county);

    //清空经纬度
    $("#result_").find("tr").remove();
    $("#longitude").val(null);
    $("#latitude").val(null);
}

//监听街道详细地址改变则清空经纬度
$('textarea').bind('input propertychange', function(){
    if($(".textareachange").val() != ""){
        //清空经纬度
        $("#result_").find("tr").remove();
        $("#longitude").val(null);
        $("#latitude").val(null);
    }
});

6，提交数据到后台js

//保存地址数据
function submitOnclick(){
    var machineId=$("#machineId").val();
    var longitude=$("#longitude").val();
    var latitude=$("#latitude").val();

    //判断是否获取到经纬度
    if(longitude==null || latitude==null || longitude=='' || latitude==''){
        pt.alertInfo("请先获取经纬度！");
        return;
    }

    $('#form').ajaxSubmit({
        url:pt.base+"machineAddress/add.dd",
        type:"post",
        data:{},
        dataType:"json",
        success:function(result){
            if(result != null && result != "" && result != undefined){
                if(result.state == true){
                    newMenuItem(pt.base+"machineAddress/list.dd?machineId="+machineId);
                }else{
                    pt.alertInfo("新增失败,请重试");
                    return;
                }
            }
        }
    });
}