百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）
百度地图Api之自定义标注：（获得标注的经纬度和中心经纬度即缩放度）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImgPos.aspx.cs" Inherits="Test_Web1.ImgPos" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript" src="http://api.map.baidu.com/api?key=Xk7GGYEEw6ly1mo4thDwtaxl&v=1.1&services=true"></script> <script type="text/javascript" src="/Js/jquery-1.6.2.min.js"></script> </head> <body> <form id="form1" runat="server"> <div> <table> <tr> <td> <div id="iPicture" style="border:1px solid blue;width:1000px;height:600px;"> <%--<div id="picture1" style="background: url('/Img/home.JPG')"></div>--%> <%--<image id="picture1" src="/Img/home.JPG"></image>--%> <!--百度地图容器--> <div style="width:1000px;height:600px;border:#ccc solid 1px;" id="dituContent"></div> </div> </td> <td> <div id="tdvDevices" style="border:1px solid blue;width:200px;height:600px;"> <span id="sp1"></span> </div> </td> </tr> </table> </div> </form> </body> </html> <script type="text/javascript"> // //添加一个监听事件 // map.addEventListener('click', function (e) { // $('#sp1').text(e.point.lng + "|" + e.point.lat); // //定义一个图标 // var icon = new BMap.Icon('/Img/1.png', new BMap.Size(20, 32), { // anchor: new BMap.Size(10, 30), // infoWindowAnchor: new BMap.Size(0, 0) // }); // //定义一个标注 // var mkr = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat), { // icon: icon, // enableDragging: true, //支持拖拽 // raiseOnDrag: true // }); // var label = new BMap.Label('环益国际', { "offset": new BMap.Size(9, -15) }); // mkr.setLabel(label); // //把标注加入地图 // map.addOverlay(mkr); // //监听 获得标注拖拽后的经维度 // mkr.addEventListener('dragend', function (e) { // $('#sp1').text(e.point.lng + "|" + e.point.lat); // }); // }); </script> <script type="text/javascript"> //创建和初始化地图函数： function initMap() { createMap(); //创建地图 setMapEvent(); //设置地图事件 addMapControl(); //向地图添加控件 } //创建地图函数： function createMap() { var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图 var point = new BMap.Point(116.096402, 40.03304); //定义一个中心点坐标 map.centerAndZoom(point, 10); //设定地图的中心点和坐标并将地图显示在地图容器中 window.map = map; //将map变量存储在全局 } //地图事件设置函数： function setMapEvent() { map.enableDragging(); //启用地图拖拽事件，默认启用(可不写) map.enableScrollWheelZoom(); //启用地图滚轮放大缩小 map.enableDoubleClickZoom(); //启用鼠标双击放大，默认启用(可不写) map.enableKeyboard(); //启用键盘上下左右键移动地图 } //地图控件添加函数： function addMapControl() { //向地图中添加缩放控件 var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrl_nav); //向地图中添加缩略图控件 var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrl_ove); //向地图中添加比例尺控件 var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrl_sca); } initMap(); //创建和初始化地图 //定义一个用于标注的图标 var icon = new BMap.Icon('/Img/1.png', new BMap.Size(20, 32), { anchor: new BMap.Size(10, 30), infoWindowAnchor: new BMap.Size(0, 0) }); function LocationDevice() { //定位设备 var idd = ''; $('input[name=btn_devices]').each(function (k, v) { $(this).click(function () { idd = $(this).attr('id'); }); }); //当鼠标进入地图点击时，获得鼠标的经维度， map.addEventListener('click', function (e) { if (idd.length <= 0) { return; } var v = $('#' + idd + '').val(); //值 var x = e.point.lng; var y = e.point.lat; $('#sp1').text(x + "|" + y); //在该经维度创建一个标注(含Icon)，再创建一个label标签，把label加入标注,把标注加入地图，设置这个按钮的经纬度并隐藏， //定义一个标注 var mkr = new BMap.Marker(new BMap.Point(x, y), { icon: icon, enableDragging: true, //支持拖拽 raiseOnDrag: true }); var label = new BMap.Label(v, { "offset": new BMap.Size(9, -15) }); mkr.setLabel(label); map.addOverlay(mkr); $('#' + idd + '').attr({ 'hidden': 'true', 'lnt': x, 'lat': y }); //给这个标注添加拖拽事件，获得拖拽后的经纬度，设置这个按钮的经纬度并隐藏， mkr.addEventListener('dragend', function (e) { $('#' + idd + '').attr({ 'lnt': x, 'lat': y }); $('#sp1').text(x + "|" + y); var center = map.getCenter(); alert("地图中心点变更为：" + center.lng + ", " + center.lat + "；地图缩放至：" + map.getZoom() + "级"); }); //移除当前按钮的事件 idd = ''; }); } $(function () { //加载设备 $.ajax({ type: 'post', dataType: 'json', url: '/ImgPos.ashx', data: { action: 'show' }, success: function (data) { if (data.status == 'error') { alert('服务器错误:' + data.msg); } else if (data.status == 'ok') { if ($('#dvDev')) { $('#dvDev').remove(); } var dvDev = $('<div id="dvDev"></div>').appendTo($('#tdvDevices')); dvDev.css({ 'width': '200px', 'height': '300px', 'border': '1px solid blue' }); //遍历设备 $.each(data.data, function (k, v) { //创建按钮 var btnDev = $('<input type="button" value="' + v.Name + '" devid="' + v.ID + '" />').appendTo(dvDev); btnDev.css({ 'width': '200px', 'height': '40px' }); btnDev.attr({ 'id': 'devce' + v.ID, 'name': 'btn_devices' }); $('<br/>').appendTo(dvDev); }); LocationDevice(); } else { alert('服务器错误:' + data.status); } }, error: function () { alert('服务器错误'); } }); //更新坐标到数据库 }) </script>
ImgPosition.ahsx
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/html"; string action=context.Request["action"]; if (action == "show") { List<Device> list = new List<Device>(); list.Add(new Device(1, "设备1", "/Img/1.png", "121", "233")); list.Add(new Device(2, "设备2", "/Img/2.png", "101", "133")); list.Add(new Device(3, "设备3", "/Img/3.png", "111", "123")); list.Add(new Device(4, "设备4", "/Img/4.png", "131", "113")); list.Add(new Device(5, "设备5", "/Img/5.png", "141", "103")); string json = new JavaScriptSerializer().Serialize(new { status = "ok", data = list, msg = "成功" }); context.Response.Write(json); } else { string json = new JavaScriptSerializer().Serialize(new { status = "error", data = "", msg = "未知的action=" + action }); context.Response.Write(json); } }