我相信大家都見過某些電商網站的這樣一個功能，你開一個店鋪會讓你手動設置你的店鋪所在位置，還是看圖吧本人文字功底有限。
如下圖所示：
那么這個功能是怎么實現的呢，我給大家分享一下，其實只要自己認真去看百度地圖的JavaScript版本的API這個會變得很簡單
不啰嗦了下面上代碼：
aspx頁面內容如下：
<head runat="server">
<title></title>
<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
//此處是引用Jquery文件不做過多介紹
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
//此處是調用百度地圖的JavaScript版本的API文件
<style type="text/css">
.mapContainer
{
width:700px;
height: 600px;
border: 1px solid #e1e1e1;
margin:10px 10px 10px 10px;
}
.btnhui{border:1px solid #c4c4c4;height:20px; cursor: pointer;min-width:50px;}
body,h1,h2,h3,h4,h5,h6,hr,p,dl,dt,dd,ul,ol,li,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;color:#333333;}
body,button,input,select,textarea{font-family: "\5b8b\4f53","Tamoda","Arial",Sans-serif; font-size: 12px;}
</style>
<script src="js_map.js" type="text/javascript"></script>
//這個JS文件時我們所需要寫的通過它來實現上圖中的功能，這個JS文件的具體內容稍后會貼出
</head>
<body>
<table cellpadding="0" cellspacing="0" align="center" style="border: solid 0px #D0D0D0">
<tr>
<td height="30px" colspan="3" style="background-image: url(/services/MMweb/images/login_topbg.gif);
border-bottom: solid 1px #D0D0D0" align="left">
<span class="zi14 zibold paddingleft15">編輯地圖信息</span>
</td>
</tr>
<tr>
<td>
<div class="mapContainer" id="container">
</div>
//container通過名字我們大概就能猜出這個div是干什么用的，沒錯你才對了，它就是用來承載百度地圖的容器
</td>
</tr>
</table>
</body>
</html>
關鍵的JS文件：
上面說過了要實現貼圖所示的功能關鍵是看這個<script src="js_map.js" type="text/javascript"></script>文件里面的內容，下面解開她的神秘面紗。
代碼如下：
var lngAndlat = ""; //所選地點的經度和緯度 格式 "經度：|緯度："
$(document).ready(function (event) {
var map = new BMap.Map("container"); //創建Map實例
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15); //初始化地圖設置中心坐標和地圖級別
//添加紅色標注
var marker = new BMap.Marker(point);
map.addOverlay(marker);
//實現鼠標滾輪滾動實現放大縮小地圖
map.enableScrollWheelZoom();
//添加自定義控件
var opt = { type: BMAP_NAVIGATION_CONTROL_LARGE }; //顯示完整的平移縮放控件
var navigationControl = new BMap.NavigationControl(opt);
map.addControl(navigationControl);
//△設置控件的偏移量屬性offset
var opts = { offset: new BMap.Size(150, 5) }
map.addControl(new BMap.ScaleControl(opts));
map.addControl(new BMap.OverviewMapControl());
//添加藍色標注
var myIcon = new BMap.Icon("http://api.map.baidu.com/images/blank.gif", new BMap.Size(23, 25), {
//指定定位位置
//當標注顯示在地圖上時，其所指向的地理位置距離圖標左上角各偏移10像素和25像素。您可以看到在本例中該位置即是
//圖標中央下端的尖角位置。
offset: new BMap.Size(10, 25),
//設置圖片偏移
//當您需要從一幅較大的圖片中截取某部分作為標注圖標時，您需要指定大圖的偏移位置，其做法於css sprites技術類型。
imageOffset: new BMap.Size(442, 449)
});
var blueMarker = new BMap.Marker(point, myIcon);
blueMarker.enableDragging();
map.addOverlay(blueMarker);
//設置信息窗口(用戶標注地圖坐標的信息)
var optsss = {
width: 70, //信息窗口寬度
height: 80, //信息窗口高度
title: "是否將新位置設為商戶的默認位置！"//信息窗口標題
};
var infoWindowYHBZ = new BMap.InfoWindow("<input type='button' value='是' id='btnYes' onclick='MapTYBZ()' / class='btnhui'> <input type='button' value='否' id='btnNo' onclick='MapFRBZ()' class='btnhui'/>", optsss); //創建信息窗口對象
//設置信息窗口（提示用戶標注信息）
var recalOptsss = {
width: 70, //信息窗口寬度
height: 80, //信息窗口高度
title: ""//信息窗口標題
};
var infoWindowTXYH = new BMap.InfoWindow("<span>您可以拖動此圖標在地圖上標注店鋪位置。</span>", recalOptsss);
blueMarker.openInfoWindow(infoWindowTXYH); //打開信息窗口
blueMarker.addEventListener("mousedown", function (e) {
blueMarker.closeInfoWindow(); //關閉信息窗口
});
blueMarker.addEventListener("mouseup", function (e) {
blueMarker.openInfoWindow(infoWindowYHBZ); //打開信息窗口
});
//拖拽結束后出發此事件
blueMarker.addEventListener("dragend", function (e) {
lngAndlat= "經度:" + e.point.lng + "|緯度:" + e.point.lat;
});
});
//添加標記
function MapTYBZ() {
window.parent.getlngAndLat_map(lngAndlat); //像父頁面返回地圖經緯度 格式 “經度：|緯度：”
}
//取消標記
function MapFRBZ() {
lngAndlat = "";
window.parent.getlngAndLat_map(lngAndlat); //像父頁面返回地圖經緯度 格式 “經度：|緯度：” 取消標記時返回的是一個空值
}
好了大公告成，
這里有一個問題就是那個可以拖動的小紅氣球我一直想把它換成深藍的但是卻沒能如願，園子里的朋友如果有興趣可以試試