我相信大家都见过某些电商网站的这样一个功能，你开一个店铺会让你手动设置你的店铺所在位置，还是看图吧本人文字功底有限。
如下图所示：
那么这个功能是怎么实现的呢，我给大家分享一下，其实只要自己认真去看百度地图的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
{
700px;
height: 600px;
border: 1px solid #e1e1e1;
margin:10px 10px 10px 10px;
}
.btnhui{border:1px solid #c4c4c4;height:20px; cursor: pointer;min-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 = {
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 = {
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); //像父页面返回地图经纬度 格式 “经度：|纬度：” 取消标记时返回的是一个空值
}
好了大公告成，
这里有一个问题就是那个可以拖动的小红气球我一直想把它换成深蓝的但是却没能如愿，园子里的朋友如果有兴趣可以试试