//其它jquery
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F372ba2499981fed68d8a6d820cd0f36"></script>
<script type="text/javascript">
//地圖
var map;
var infoWindow = null, marker;
function findPosit(addr) {
addr = addr;
var gc = new BMap.Geocoder(); //地址解析類
gc.getPoint(addr, function (p) {
if (p) {
//經度
var opts = {
width: 200, // 信息窗口寬度
height: 60, // 信息窗口高度
title: "活動地點", // 信息窗口標題
enableMessage: true, //設置允許信息窗發送短息
message: "活動地點:" + addr
}
Easy.get("SLocation").value = p.lng + "," + p.lat;
infoWindow = new BMap.InfoWindow("地址：" + addr, opts); // 創建信息窗口對象
infoWindow.disableCloseOnClick();
map.openInfoWindow(infoWindow, p); //開啓信息窗口
map.centerAndZoom(p, 18);
if (!marker) {
marker = new BMap.Marker(p);
} else {
marker.setPosition(p);
}
marker.setTitle("活動地點");
map.addOverlay(marker); // 將標註添加到地圖中
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function (e) {
var p = marker.getPosition(); //獲取marker的位置
var dom = $('#SLocation');
dom.val(p.lng + "," + p.lat);
gc.getLocation(p, function (rs) {
$('#ActivityPlace').val(rs.address);
var opts = {
width: 200, // 信息窗口寬度
height: 60, // 信息窗口高度
title: "活動地點", // 信息窗口標題
enableMessage: true, //設置允許信息窗發送短息
message: "活動地點:" + rs.address
}
infoWindow = new BMap.InfoWindow("地址：" + rs.address, opts); // 創建信息窗口對象
infoWindow.disableCloseOnClick();
map.openInfoWindow(infoWindow, p); //開啓信息窗口
});
});
}
});
}
function getMapLoc(loc, addr) {
if (typeof (loc) == "undefined" || $.trim(loc) == "") {
loc = "119.649248,29.082041";
}
var arr = loc.split(',')
map = new BMap.Map("map");
map.addControl(new BMap.NavigationControl()); //添加默認縮放平移控件
map.enableScrollWheelZoom(); //開啓鼠標滾動放大縮小
var point = new BMap.Point(arr[0], arr[1]);
map.centerAndZoom(point, 18);
if (!marker) {
marker = new BMap.Marker(point);
} else {
marker.setPosition(point);
}
marker.setTitle("商鋪地點");
map.addOverlay(marker); // 將標註添加到地圖中
marker.enableDragging(); //可拖拽
marker.addEventListener("dragend", function (e) {
var p = marker.getPosition(); //獲取marker的位置
var dom = $('#SLocation');
dom.val(p.lng + "," + p.lat);
//獲取地址信息
var gc = new BMap.Geocoder(); //地址解析類
gc.getLocation(p, function (rs) {
$('#ActivityPlace').val(rs.address);
var opts = {
width: 200, // 信息窗口寬度
height: 60, // 信息窗口高度
title: "商鋪地點", // 信息窗口標題
enableMessage: true, //設置允許信息窗發送短息
message: "商鋪地點:" + rs.address
}
infoWindow = new BMap.InfoWindow("地址：" + rs.address, opts); // 創建信息窗口對象
infoWindow.disableCloseOnClick();
map.openInfoWindow(infoWindow, p); //開啓信息窗口
});
});
if (addr) {
var opts = {
width: 200, // 信息窗口寬度
height: 60, // 信息窗口高度
title: "商鋪地點", // 信息窗口標題
enableMessage: true, //設置允許信息窗發送短息
message: "商鋪地點:" + addr
}
infoWindow = new BMap.InfoWindow("地址：" + addr, opts); // 創建信息窗口對象
infoWindow.disableCloseOnClick();
map.openInfoWindow(infoWindow, point); //開啓信息窗口
}
//右鍵菜單
var contextMenu = new BMap.ContextMenu();
var txtMenuItem = [
{
text: '在此設置商鋪地點',
callback: function (p) {
marker.setPosition(p);
var dom = $('#SLocation');
dom.val(p.lng + "," + p.lat);
var gc = new BMap.Geocoder(); //地址解析類
gc.getLocation(p, function (rs) {
$('#ActivityPlace').val(rs.ActivityPlace);
});
}
},
{
text: '放大',
callback: function () { map.zoomIn() }
},
{
text: '縮小',
callback: function () { map.zoomOut() }
},
{
text: '放置到最大級',
callback: function () { map.setZoom(18) }
}
];
for (var i = 0; i < txtMenuItem.length; i++) {
contextMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
if (i == 1 || i == 3) {
contextMenu.addSeparator();
}
}
map.addContextMenu(contextMenu);
}
</script>
頁面關鍵代碼：
<div class='field left'>
<label class="lbl">地址：</label>
<input type='text' name='ActivityPlace' id="ActivityPlace" datatype="*" isnull="true" onchange="findPosit(this.value);" placeholder="活動地址"/>
<input type="hidden" name="SLocation" id="SLocation" />
<div class='clear'></div>
</div>
<div class='field'>
<label class='lbl'>地圖：</label>
<div class='left'>
<div id="map" style="height: 300px; width: 920px"></div>
</div>
<div class='clear'></div>
</div>