使用百度地图获取经纬度，保存经纬度等
先说简单需求吧。我们输入一个地理位置，点击确认后能在地图标记处带有关键字的位置。选中正确的位置可以获取到这个位置的经度和纬度。
首先需要导入百度地图的js文件，和JQ文件，这里使用的是1.3版本，在高版本需要设置appid等一些权限问题。
大家可以随意发挥
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://api.map.baidu.com/api?v=1.3" type="text/javascript"></script>
</head>
<body>
<div id="roomTypeditu">
<div class="modal-dialog">
<div class="modal-content">
<table id="_DialogTable_0" style="font-size:12px; line-height:1.4;border-collapse: collapse;" width="876"
cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr valign="top">
<td class="dialog_mlm dialog_borderWidth"></td>
<td align="center">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
<tbody>
<tr id="_MessageRow_0" style="display:none">
<td valign="top" height="50">
<table class="dialog_bg" id="_MessageTable_0" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td align="center" width="50" height="50"><input class="dialog_messageIcon" id="_MessageIcon_0" type="button"></td>
<td style="line-height: 16px;" align="left">
<div id="_MessageTitle_0" style="font-weight:bold"></div>
<div id="_Message_0"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td valign="top">
<div style="padding-top: 13px;" id="lableinfo">
<div><label style="margin: 5px 0 0 0;float: left;" class="control-label no-padding-right" for="form-field-1-1">地址：</label><span
class="input-icon"><input class="nav-search-input" id="cityName" autocomplete="off" name="query" value=""
placeholder="这里输入地址/选择地点" type="text"></span><input type="button" onclick="setCity()" value="查找" /></div>
<div class="form-group" style="float:left">
<div style="float: left;"><label style="margin: 5px 0 0 0;float: left;" class="control-label no-padding-right"
for="form-field-1-1">经度：</label></div>
<div style="float: left;"><input id="jing_du" disabled="disabled" style="padding: 5px 5px;width:150px;border: 1px solid #d5d5d5;"
typle="text" value="" placeholder="经度"></div>
</div>
<div class="form-group" style="float:left; margin-left: 20px;">
<div style="float: left;"><label style="margin: 5px 0 0 0;" class="control-label no-padding-right" for="form-field-1-1">纬度：</label></div>
<div style="float: left;"><input id="wei_du" disabled="disabled" style="padding: 5px 5px;width:150px;border: 1px solid #d5d5d5;"
typle="text" value="" placeholder="纬度"></div>
</div>
</div>
<div id="container" style="text-align:left;position: relative; width: 850px; height: 600px;">
<div style="position: absolute; height: 100%; width: 100%; display: none; background-color:#fff; opacity: 0.5;"
id="_Covering_0"> </div><iframe style="border:none 0;" id="_DialogFrame_0" width="100%" height="100%"
frameborder="0"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="dialog_mrm dialog_borderWidth"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var search = "";
var that = this;
//多窗口模式，层叠置顶
if ($("#address").val() != "") {
$("#cityName").val($("#address").val());
} else {
$("#cityName").val("郑州");
}
var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
var point = new BMap.Point($("input[name=longitude]").val() == "" ? 113.627392 : $("input[name=longitude]").val(), $(
"input[name=latitude]").val() == "" ? 34.831463 : $("input[name=latitude]").val()); //创建点坐标
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 14); //初始化地图，设置中心点坐标和地图级别
map.enableScrollWheelZoom(); //激活滚轮调整大小功能
map.addControl(new BMap.NavigationControl()); //添加控件：缩放地图的控件，默认在左上角；
map.addControl(new BMap.MapTypeControl()); //添加控件：地图类型控件，默认在右上方；
map.addControl(new BMap.ScaleControl()); //添加控件：地图显示比例的控件，默认在左下方；
map.addControl(new BMap.OverviewMapControl()); //添加控件：地图的缩略图的控件，默认在右下方； TrafficControl
//单击获取点击的经纬度
map.addEventListener("click", function(e) {
var jing_du_value = e.point.lng;
var wei_du_value = e.point.lat;
$("#jing_du").val(jing_du_value);
$("#wei_du").val(wei_du_value);
});
search = new BMap.LocalSearch("中国", {
onSearchComplete: function(result) {
if (search.getStatus() == BMAP_STATUS_SUCCESS) {
var res = result.getPoi(0);
var point = res.point;
map.centerAndZoom(point, 11);
}
},
renderOptions: { //结果呈现设置，
map: map,
autoViewport: true,
selectFirstResult: true
},
onInfoHtmlSet: function(poi, html) { //标注气泡内容创建后的回调函数，有了这个，可以简单的改一下返回的html内容了。
// alert(html.innerHTML)
} //这一段可以不要，只不过是为学习更深层次应用而加入的。
});
search.search(document.getElementById("cityName").value);
function setCity() {
search.search(document.getElementById("cityName").value);
}
</script>
</html>
大家可以根据自己的需要修改即可。
正文到此结束(点击广告是对作者最大的支持)
