根据地址获取百度地图经纬度
效果图:
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> </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> </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> </label>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label> </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;
}
}
}
});
}