在做項目開發中，常常會用到定位的操作，比如在做一些資産房産等方面的業務的時候，需要知道資産的具體位置，并将位置資訊儲存下來，這個時候我們可以使用form表單嵌入百度地圖的方式來實作這個功能，下面請看詳細步驟。
一、功能截圖
滑鼠點選輸入框的時候就會出現百度地圖，同時還可以輸入位置進行搜尋
二、要實作這個功能，步驟如下
1、引入：
<script src="${ctxStatic}/js/map.jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=EZPCgQ6zGu6hZSmXlRrUMTpr"></script>
map.jquery.js内容如下
$.fn.bMap=function(option){
option = $.extend({"name":"map"},option);
var _this = $(this),
name = option["name"],
point,
location_lng = 116.331398,
location_lat = 39.897445,
ac,
map,
$map = $("<div class='map-warp' id='Map_"+name+"'></div"),
$input = $("<input type='text' name='"+name+"' id='Map_input_"+name+"'/>"),
$location = $("<input type='hidden' name='locatioN"+name+"' id='Map_location_"+name+"'/>"),
svg = $('<svg t="1495288306982" class="icon" style="position: absolute;right:5px;top:50%;margin-top: -10px;" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M883.3663 412.6822c0-203.9497-165.3527-369.3186-369.3347-369.3186-203.9811 0-369.3337 165.3679-369.3337 369.3186 0 114.989 52.5405 217.6864 134.9211 285.4175l190.8474 200.2232c9.8307 13.246 25.5877 21.8352 43.3424 21.8352 16.3706 0 31.0232-7.2981 40.9139-18.8023h0.006995543838574828l200.5313-208.9993c17.6088-15.1997 33.7645-32.0373 48.2363-50.2719l8.1298-8.4733h-1.5949839951950608C856.0917 572.0042 883.3663 495.532 883.3663 412.6822zM513.9646 596.0299c-112.971 0-204.5377-91.5619-204.5377-204.5073 0-112.9674 91.5667-204.5293 204.5377-204.5293 112.9501 0 204.5157 91.5629 204.5157 204.5293C718.4813 504.468 626.9157 596.0299 513.9646 596.0299z" p-id="2379" fill="#666666"></path></svg>')
;
_this.append($input).append($location).append($map).append(svg);
//判斷是否有預設值
if(option.location || option.address)
{
if(option.location) //如果有預設坐标
{
point = new BMap.Point(option.location[0], option.location[1]);
location_lng = option.location[0];
location_lat = option.location[1];
$location.val(location_lng + "," + location_lat);
//如果有預設位址則直接使用預設位址，
//如沒有預設位址則通過坐标解析位址
if(!option.address)
getLocation(point,null,false);
else
$input.val(option.address);
}else
{
//如果沒有坐标則通過位址解析坐标
$input.val(option.address);
var geoctemp = new BMap.Geocoder();
geoctemp.getPoint(option.address,function(po){
point = po;
location_lng = po.lng;
location_lat = po.lat;
$location.val(location_lng + "," + location_lat);
})
}
}else {
//根據浏覽器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
point = r.point;
location_lng = r.point.lng;
location_lat = r.point.lat;
}
},{enableHighAccuracy: true})
}
//表單獲得焦點，初始化地圖
$input.focus(function(event) {
$map.show().css("zIndex",999);
setMap();
});
//表單失去焦點，隐藏地圖
$input.blur(function(event) {
$map.hide().css("zIndex",0);
});
//建立地圖，并綁定輸入框
function setMap(){
if(map) return false;
map = new BMap.Map("Map_"+name,{enableMapClick: false});
map.centerAndZoom(new BMap.Point(location_lng, location_lat),15);
map.enableScrollWheelZoom();
map.enableContinuousZoom();
marker(point);
map.addEventListener("click", function(e){
marker(e.point);
getLocation(e.point)
});
var valtemp = $input.val();
ac = new BMap.Autocomplete(
{"input" : "Map_input_"+name,"location" : map}
);
ac.setInputValue(valtemp);
ac.addEventListener("onconfirm", function(e) { //滑鼠點選下拉清單後的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
function myFun(){
var pp = local.getResults().getPoi(0).point; //擷取智能搜尋的結果
map.centerAndZoom(pp, 15);
getLocation(pp,_value);
marker(pp);
}
var local = new BMap.LocalSearch(map, { //智能搜尋
onSearchComplete: myFun
});
local.search(myValue);
});
};
//擷取最終的位址
function getLocation(point,_value,nocallback){
var geoc = new BMap.Geocoder();
$location.val(point.lng+","+point.lat);
geoc.getLocation(point, function(rs){
var val = rs['addressComponents'];
if(_value) val = $.extend(_value,val);
val['business'] = val['business'] ? val['business'] : "";
if(ac)
ac.setInputValue(val.province + val.city + val.district + val.street + val.streetNumber + val.business);
else
geoc.getLocation(point, function(rs){$input.val(rs.address);});
if(option.callback && !nocallback) option.callback(val,point);
});
}
function marker(point){
map.clearOverlays();
var marker = new BMap.Marker(point);
map.addOverlay(marker);
marker.enableDragging();
marker.addEventListener("dragend", function(e){
getLocation(e.point)
})
}
}; map.jquery.min.js
$.fn.bMap=function(h){h=$.extend({name:"map"},h);var j=$(this),b=h.name,p,m=116.331398,l=39.897445,q,a,n=$("<div class='map-warp' id='Map_"+b+"'></div"),o=$("<input type='text' name='"+b+"' id='Map_input_"+b+"'/>"),g=$("<input type='hidden' name='locatioN"+b+"' id='Map_location_"+b+"'/>"),f=$('<svg t="1495288306982" class="icon" style="position: absolute;right:5px;top:50%;margin-top: -10px;" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2378" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><defs><style type="text/css"></style></defs><path d="M883.3663 412.6822c0-203.9497-165.3527-369.3186-369.3347-369.3186-203.9811 0-369.3337 165.3679-369.3337 369.3186 0 114.989 52.5405 217.6864 134.9211 285.4175l190.8474 200.2232c9.8307 13.246 25.5877 21.8352 43.3424 21.8352 16.3706 0 31.0232-7.2981 40.9139-18.8023h0.006995543838574828l200.5313-208.9993c17.6088-15.1997 33.7645-32.0373 48.2363-50.2719l8.1298-8.4733h-1.5949839951950608C856.0917 572.0042 883.3663 495.532 883.3663 412.6822zM513.9646 596.0299c-112.971 0-204.5377-91.5619-204.5377-204.5073 0-112.9674 91.5667-204.5293 204.5377-204.5293 112.9501 0 204.5157 91.5629 204.5157 204.5293C718.4813 504.468 626.9157 596.0299 513.9646 596.0299z" p-id="2379" fill="#666666"></path></svg>');j.append(o).append(g).append(n).append(f);if(h.location||h.address){if(h.location){p=new BMap.Point(h.location[0],h.location[1]);m=h.location[0];l=h.location[1];g.val(m+","+l);if(!h.address){c(p,null,false)}else{o.val(h.address)}}else{o.val(h.address);var i=new BMap.Geocoder();i.getPoint(h.address,function(r){p=r;m=r.lng;l=r.lat;g.val(m+","+l)})}}else{var k=new BMap.Geolocation();k.getCurrentPosition(function(t){if(this.getStatus()==BMAP_STATUS_SUCCESS){var s=new BMap.Marker(t.point);p=t.point;m=t.point.lng;l=t.point.lat}},{enableHighAccuracy:true})}o.focus(function(r){n.show().css("zIndex",999);d()});o.blur(function(r){n.hide().css("zIndex",0)});function d(){if(a){return false}a=new BMap.Map("Map_"+b,{enableMapClick:false});a.centerAndZoom(new BMap.Point(m,l),15);a.enableScrollWheelZoom();a.enableContinuousZoom();e(p);a.addEventListener("click",function(s){e(s.point);c(s.point)});var r=o.val();q=new BMap.Autocomplete({input:"Map_input_"+b,location:a});q.setInputValue(r);q.addEventListener("onconfirm",function(v){var t=v.item.value;myValue=t.province+t.city+t.district+t.street+t.business;function s(){var w=u.getResults().getPoi(0).point;a.centerAndZoom(w,15);c(w,t);e(w)}var u=new BMap.LocalSearch(a,{onSearchComplete:s});u.search(myValue)})}function c(r,s,u){var t=new BMap.Geocoder();g.val(r.lng+","+r.lat);t.getLocation(r,function(v){var w=v.addressComponents;if(s){w=$.extend(s,w)}w.business=w.business?w.business:"";if(q){q.setInputValue(w.province+w.city+w.district+w.street+w.streetNumber+w.business)}else{t.getLocation(r,function(x){o.val(x.address)})}if(h.callback&&!u){h.callback(w,r)}})}function e(r){a.clearOverlays();var s=new BMap.Marker(r);a.addOverlay(s);s.enableDragging();s.addEventListener("dragend",function(t){c(t.point)})}}; 2、在要輸入的form表單處加上如下代碼，
其中class="bMap"不可修改，具體的input标簽可以點選f12檢視代碼就可知曉，input的name屬性在接下來的js中指派
3、書寫js代碼
$(function(){
var id=$("#id").val();
if(id==null||id==""){
$("#case1").bMap({name:"position"});//指定表單的name屬性為position
$("#Map_input_position").addClass("form-control required");
}else{
var address='${assetsLand.position}';
var location='${assetsLand.locatioNposition}';
var ss=location.split(",");
var lng=ss[0];
var lat=ss[1];
$("#case1").bMap({address:address, //預設位址，如果為空則通過解析預設坐标擷取
location:[lng,lat], //預設坐标，如果為空則通過解析預設位址擷取
name:"position" //送出表單的NAME,預設為map
});
$("#Map_input_position").addClass("form-control required");
}
})
此處操作的對象是assetsLand,position是對象中的屬性，為位置名稱，位置坐标字段為locatioNposition,在指定name屬性時注意，如果表單的name屬性為A,則坐标屬性名應該為locatioNA,
如，此處的name為position，則坐标屬性為locatioNposition,避免使用回調函數給表單指派，同時修改操作時也更加友善資料回顯
三、到此，input表單中嵌入百度地圖的操作就完成啦，是不是很簡單呢
轉載于:https://www.cnblogs.com/szy-wang/p/9087978.html