通过拖动百度地图的添加覆盖物获取所在地的经纬度坐标
2012-07-31 16:03
323 查看
我相信大家都见过某些电商网站的这样一个功能，你开一个店铺会让你手动设置你的店铺所在位置，还是看图吧本人文字功底有限。
如下图所示：
那么这个功能是怎么实现的呢，我给大家分享一下，其实只要自己认真去看百度地图的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); //像父页面返回地图经纬度 格式 “经度：|纬度：” 取消标记时返回的是一个空值
}
好了大公告成，
这里有一个问题就是那个可以拖动的小红气球我一直想把它换成深蓝的但是却没能如愿，园子里的朋友如果有兴趣可以试试
如下图所示：
那么这个功能是怎么实现的呢，我给大家分享一下，其实只要自己认真去看百度地图的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); //像父页面返回地图经纬度 格式 “经度：|纬度：” 取消标记时返回的是一个空值
}
好了大公告成，
这里有一个问题就是那个可以拖动的小红气球我一直想把它换成深蓝的但是却没能如愿，园子里的朋友如果有兴趣可以试试
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 通过百度地图获取填写的地理位置经纬度
- 百度地图 定位，地图中心坐标，拖动后获取地图中心点坐标，poi搜索
- 百度地图覆盖物可以删除可以编辑已经获取点、面的经纬度
- Web项目实现通过经纬度获取城市信息---利用百度地图
- 百度地图通过经纬度获取地址信息
- 获取百度地图上某点的经纬度信息（百度地图拾取坐标系统）
- 百度地图，通过地址获取坐标和通过坐标获取地址
- iOS-81-百度地图-通过经纬度获取到具体位置
- 通过输入省份 名字 来获取经纬度 百度地图
- android 百度地图选择地址并再通过坐标获取地址
- 百度地图拖动标注后获取坐标
- 通过百度地图获取公交线路的站点坐标的js代码
- 百度地图-通过地址获取经纬度
- 百度地图获取二个经纬度坐标间的距离
- C# ArcGISEngine通过经纬度坐标获取删格像元值
- 通过百度地图获取当前位置坐标
- 百度地图在Activity中以最简单的配置获取定位坐标字符串和经纬度
- 通过百度地图获取公交线路的站点坐标的js代码
- java后台百度地图经纬度和地址之间的相互转换（通过经纬度获取地址、通过地址获取经纬度）
- 百度地图 v3.5点击地图然和地图添加覆盖物，滑动地图获取中心点，将地图状态改变