WebForm添加百度地图，并用ajax获取数据

------------------------前台------------------------------------------------------

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请的ak"></script>

<div style="width:100%;height:100%;border:#ccc solid 1px;position:absolute;" id="dituContent"></div>
<input id="text" type="text" value="名称" />
<input id="btnGetTime" class="an" type="button" value="查询" onclick = "ShowCurrentTime()" />
<script type="text/javascript">
//创建和初始化地图
initMap();
//创建和初始化地图函数：
function initMap() {
  createMap();//创建地图
  setMapEvent();//设置地图事件
  addMapControl();//向地图添加控件
  LoadCoordinate();//加载坐标
}
//创建地图函数：
function createMap() {
  var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
  //var point = new BMap.Point(112.58, 26.89);//定义一个中心点坐标
  //map.centerAndZoom(point, 9);//设定地图的中心点和坐标并将地图显示在地图容器中
  window.map = map;//将map变量存储在全局
}
//加载坐标
function LoadCoordinate() {
  //var points = [
  //    { "lng": 112.58, "lat": 26.89, "id": 1, "name": "p1" },
  //    { "lng": 112.59, "lat": 26.90, "id": 2, "name": "p2" },
  //    { "lng": 112.57, "lat": 26.88, "id": 3, "name": "p3" }
  //];
  //addMarker(points);
}
//地图事件设置函数：
function setMapEvent() {
  map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
  map.centerAndZoom("德州", 10); // 初始化地图,设置中心点坐标和地图级别
  map.setCurrentCity("德州"); // 设置地图显示的城市此项是必须设置的
  map.enableScrollWheelZoom(true);//启用地图滚轮放大缩小
  map.addControl(new BMap.MapTypeControl()); //添加地图类型控件
  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);
}
//根据条件查询数据库
function ShowCurrentTime() {
  var name = document.getElementById("text");
  var QhdmIndex = QhdmList.selectedIndex;
  var Qhdm = QhdmList.options[QhdmIndex].value;
  $.ajax("<%=Page.ResolveUrl("~/ashx/main.ashx")%>",{
   type: "post", dataType: "json", data: { name: name,method:"getMapValue" },
   success: function (data) {
    if (data.State == 1) {
     addMarker(data.Data);
    } else {
     alert("查询失败！");
    }
   }
  });
}
function addMarker(points) {
  //循环建立标注点
  map.clearOverlays();
  if (points.length == 0) {
   alert("该地区没有签约机构！");
  }
  for (var i = 0; i < points.length; i++) {
   var name = points[i].JGMC;
   var point = new BMap.Point(points[i].LNG, points[i].LAT); //将标注点转化成地图上的点
   var marker = new BMap.Marker(point); //将点转化成标注点
   var label = new BMap.Label(name, {
    offset: new BMap.Size(5, 4)
   });
   label.setStyle({
    color : "#black",
    fontSize : "12px",
    backgroundColor :"0.05",
    border :"0",
    fontWeight :"bold"
    //background: 'none', color: '#black', border: 'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果
   });
   marker.setLabel(label);//显示地理名称 a
   map.addOverlay(marker); //将标注点添加到地图上
   (function() {
    var thePoint = points[i];
     marker.addEventListener("click",
     //显示信息的方法
     function() {
     showInfo(this,thePoint);
    });
   })();
  }
  var point = new BMap.Point(points[0].LNG, points[0].LAT);//定义一个中心点坐标
  map.centerAndZoom(point, 11);//设定地图的中心点和坐标并将地图显示在地图容器中
}
//编写信息显示方法
function showInfo(thisMarker,point) {
  //获取点的信息
  var sContent =
  '<ul style="margin:0 0 5px 0;padding:0.2em 0">'
  +'<li style="line-height: 26px;font-size: 15px;">'
  +'<span style="width: 50px;display: inline-block;">名称：</span>' + point.JGMC + '</li>'
  +'</ul>';
  var infoWindow = new BMap.InfoWindow(sContent); //创建信息窗口对象
  thisMarker.openInfoWindow(infoWindow); //图片加载完后重绘infoWindow
}
</script>

-------------------------后台--------------------------------------

1、创建一个ashx的文件，继承IHttpHandler
2、创建一个公用的web接口，供所有的ajax全部调用，根据参数判断执行方法
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string method = context.Request.Form["method"];
if(string.IsNullOrEmpty(method))
{
context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(new { State = 0, Message = "请求方法不明确！" }));
return;
}
switch(method)
{
case
   "getMapValue":
   getMapValue(context);
   break;
}
}
3、执行方法
private void getMapValue(HttpContext context)
{
//获取前台传过来的参数
string QHDM = context.Request.Form["QHDM"];
//这个就是返回的数据，data为list集合
context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(
new
{
State = 1,
Data = new DEMO_FD_JGMAPDal().GetDataByQHDM(QHDM)
}));
}

WebForm添加百度地图，并用ajax获取数据

猜你喜欢