------------------------前台------------------------------------------------------
<!-- 添加地址 -->
<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)
}));
}