注意：1、需要引入：jquery-1.7.1.min.js
2、要在有網絡的情況下才能測試，因爲引入了百度中的地圖地址
地圖的CSS樣式：
@charset "utf-8";
/* CSS Document */
.map{width:800px;height:404px;text-align:center;float:left;overflow: hidden;}
.map_left{width:601px;float:left;height:380px;border:2px solid #afafaf;}
.map_right{width:193px;float:right;height:380px;border:1px solid #ccc; }
.map_right_bg{width:193px;background:#e4ecf9;height:20px;}
.map_right_top{width:193px;text-align:center;}
.map_right_top_left{float:left;width:90px;height:30px;}
.map_right_top_right{float:right; text-align:left;height:30px;width:90px;}
.map_right_search{width:193px;}
.map_right_search_left{}
.map_right_search_right{}
.map_right_result{width:193px;text-align:left;}
主界面代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>標註餐館的位置</title>
<link rel="stylesheet" type="text/css" href="mark_map.css"/>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src=" http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerTool/1.2/src/MarkerTool_min.js"></script>
<style type="text/css">
.desc{width:100%;hieght:25px;margin:0;padding 0;}
.cityList{height: 320px;width:372px;overflow-y:auto;}
.sel_container{position:absolute;top:0;font-size:12px;}
.map_popup {position: absolute;z-index: 200000;width: 382px;height: 344px;top:20px;}
.map_popup .popup_main { background:#fff;border: 1px solid #8BA4D8;height: 100%;overflow: hidden;position: absolute;width: 100%;z-index: 2;}
.map_popup .title {background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
color: #6688CC;font-size: 12px;font-weight: bold;height: 24px;line-height: 25px;padding-left: 7px;}
.map_popup button {background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
border: 0 none;cursor: pointer;height: 12px;position: absolute;right: 4px;top: 6px;width: 12px;}
</style>
</head>
<body>
<div>
<div id="desc">
<span class="titleClass">標註地理位置</span>(請點擊地圖右側的標註按鈕，然後在地圖上進行標註)
</div>
<div class="map">
<div class="map_left" id="container"></div>
<div class="map_right">
<div class="map_right_bg"></div>
<div class="map_right_top">
<div class="map_right_top_left"><strong id="curCity">北京市</strong></div>
<div class="map_right_top_right">
[<a id="curCityText" href="javascript:void(0)">更換城市</a>]
</div>
<div class="map_popup" id="cityList" style="display:none;text-align: left;">
<div class="popup_main">
<div class="title">城市列表</div>
<div class="cityList" id="citylist_container"></div>
<button id="popup_close"></button>
</div>
</div>
</div>
<div class="map_right_search">
<input type="text" id="search" style="width: 120px;" />
<input type="button" οnclick="search()" value="搜索"/>
</div>
<div class="map_right_result" style="height:280px;overflow: auto;">
<div id="results" style="font-size:13px;margin-top:10px;"></div>
</div>
<div style="width:193px;">
<input type="button" value="標註" οnclick="mkrTool.open()"/>
<input type="hidden" id="lng" value="<s:property value='#session.res_session.get(\'longitude\')'/>"/>
<input type="hidden" id="lat" value="<s:property value='#session.res_session.get(\'latitude\')'/>"/>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
// 新創建地圖
var ox=parseFloat($("#lng").val());
var oy=parseFloat($("#lat").val());
var map = new BMap.Map("container");
var point;
if(ox>0){
point = new BMap.Point(ox, oy);
}else{
point = new BMap.Point(116.404, 39.915);
}
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom();
var mkrTool = new BMapLib.MarkerTool(map, {autoClose: true, followText: "添加標註"});
map.addEventListener("click",function(e){
if(mkrTool._isOpen==true){
var lng=$("#lng").val();
var x=e.point.lng;
var y=e.point.lat;
if(lng.length>0){
if(window.confirm("你已經標註了，確定修改嗎？")){
markMap(x,y);
}else{
//alert("你選擇了放棄");
mkrTool.close();
}
}else{
markMap(x,y);
}
}
});
function markMap(x,y){
$.post("restaurantAction!resMapMark.do",{posX:x,posY:y},function(data){
if("success"==$.trim(data)){
alert("標註成功");
}else{
alert("標註失敗");
}
},'text');
}
// 創建CityList對象，並放在citylist_container節點內
var myCl = new BMapLib.CityList({container : "citylist_container", map : map});
// 給城市點擊時，添加相關操作
myCl.addEventListener("cityclick", function(e) {
// 修改當前城市顯示
document.getElementById("curCity").innerHTML = e.name;
// 點擊後隱藏城市列表
document.getElementById("cityList").style.display = "none";
});
// 給“更換城市”鏈接添加點擊操作
document.getElementById("curCityText").onclick = function() {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};
// 給城市列表上的關閉按鈕添加點擊操作
document.getElementById("popup_close").onclick = function() {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "results"},
pageCapacity: 8
});
function search(){
var area=$('#search').val();
local.search(area);
}
</script>
</body>
</html>