<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
去掉,否则地图显示不出来(测试环境 ie8+win7)
1 引用百度地图的js(API),
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
2 应用一 搜索某个地点,返回结果列表
要测试该部分要引用
<script src="/js/jquery-1.4.js" type="text/javascript"></script>
把下面部分放到 body即可
<div>
<div id="searchtb">所在城市(必选):<input id="txtcity" type="text" />搜索地点<input id="txtsearch" type="text" /><input id="Button3" type="button" value=" 搜索 " onclick="searchmap();" /><input id="txtpoint" type="text" /><input id="Button2" type="button" value=" 确定 " onclick="Toopenner2();" /></div>
<div id="divresult">搜索结果(请从选项中选择你要的地点坐标):<br></div>
<div id="container" style="98%; height:95%; margin-left:15px;"></div>
<script type="text/javascript">
var strwindowinfo = "选择坐标点";
var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
window.map = map;
map.enableScrollWheelZoom();
//1.NavigationControl：缩放地图的控件，默认在左上角；
//2.OverviewMapControl：地图的缩略图的控件，默认在右下方；
//3.ScaleControl：地图显示比例的控件，默认在左下方；
//4.MapTypeControl：地图类型控件，默认在右上方；
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
//深圳市南山区
var point = new BMap.Point(113.95, 22.55);
map.centerAndZoom(point, 12);
var marker = new BMap.Marker(point);
//var label = new BMap.Label(data[i].SiteName, { "offset": new BMap.Size(20, -20) });
//marker.setLabel(label);
map.addOverlay(marker);
//地图移至新中心点
//map.panTo(new BMap.Point());
//开启区域缩放工具
//var myDragAndZoomTool = new BMap.DragAndZoomTool(map);
//myDragAndZoomTool.open();
(function() {
map.addEventListener("click", function(e) {
//alert(e.point.lng + "," + e.point.lat);
document.getElementById("txtpoint").value = e.point.lng + "," + e.point.lat;
//$("#txtpoint").val(e.point.lng + "," + e.point.lat);
});
})()
//----------for end----------
function Toopenner(strpoint) {
//alert(strpoint);
$("#txtpoint").val(strpoint);
//选中的地点坐标放到文本框中
}
function Toopenner2() {
var strpoint=$("#txtpoint").val();
window.returnValue = strpoint;
window.close();
}
function searchmap() {
var strcity = document.getElementById("txtcity").value;
var straddress = document.getElementById("txtsearch").value;
if (strcity == "") {
alert("必须输入城市名");
return false;
}
if (straddress == "") {
alert("必须输入搜索地址");
return false;
}
var map = new BMap.Map("container");
var city = new BMap.LocalSearch(map, { renderOptions: { map: map, autoViewport: true} });
//pagecapacity=5;
//每次生成前清空存放结果的div文本域
$("#divresult").html("搜索结果:(请从选项中选择你要的地点坐标)<br>");
map.clearOverlays(); //清除地图上所有标记
city.search(strcity); //查找城市
var ls = new BMap.LocalSearch(strcity);
ls.search(straddress);
//闭包,添加地图的点击事件,map也可以换成标注 market
(function() {
map.addEventListener("click", function(e) {
//alert(e.point.lng + "," + e.point.lat);
document.getElementById("txtpoint").value = e.point.lng + "," + e.point.lat;
});
})()
var i = 1;
ls.setSearchCompleteCallback(function(rs) {
if (ls.getStatus() == BMAP_STATUS_SUCCESS) {
for (j = 0; j < rs.getCurrentNumPois(); j++) {
if (j > 5 || i > 5) { break; } //目的控制结果太多,只取前一部分结果
var poi = rs.getPoi(j);
var market = new BMap.Marker(poi.point);
map.addOverlay(market); //如果查询到，则添加红色marker
var strval1 = poi.title;
var strval2 = poi.point.lng + "," + poi.point.lat;
var str2 = "<input type='radio' value='" + strval2 + "' name='selepoint' onClick='Toopenner(this.value);'>"+strval1+" ";
$("#divresult").append(str2);
}
if (rs.getPageIndex != rs.getNumPages()) {
//if(i>5){break;}
ls.gotoPage(i);
i = i + 1;
}
}
});
}
</script>
</div>
3 应用二 闪烁报警
<div>
<div id="container" style="98%; height:95%; margin-left:15px;"></div>
<script type="text/javascript">
var map = new BMap.Map("container"); //在container容器中创建一个地图,参数container为div的id属性;
window.map = map;
map.enableScrollWheelZoom();
//1.NavigationControl：缩放地图的控件，默认在左上角；
//2.OverviewMapControl：地图的缩略图的控件，默认在右下方；
//3.ScaleControl：地图显示比例的控件，默认在左下方；
//4.MapTypeControl：地图类型控件，默认在右上方；
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
var point01 = new BMap.Point(100, 100);
var marker01 = new BMap.Marker(point01);
//从某一服务取报警数据
$.post("/getsitealarmlist.ashx", { Action: "post", Name: "" },
function(data, textStatus) {
// data 可以是 xmlDoc, jsonObj, html, text, 等等.
var isshow = 1;
var currentsiteid = "";
var strlabledata = "";
var strlablehead = "";
var timeid = new Array();
var marker = new Array();
var isfirst = true;
for (var i = 0; i < data.length; i++) {
//alert(data[i].siteid);
var point = new BMap.Point(data[i].Lng_S, data[i].Lat_S);
//设第一个点为中心
if (i == 0) {
//10 为地图大小比例
map.centerAndZoom(point, 12);
}
currentsiteid = data[i].SiteID;
//--------for----------
strlablehead = "<table><tr><td align='center' colspan='2'>子站信息</td></tr><tr><td>子站名</td><td>" + data[i].SiteName + "</td></tr>";
strlabledata += "<tr><td>报警时间:" + data[i].AlarmDate + "</td><td>报警内容:" + data[i].AlarmInfo + "</td></tr>";
//说明是同一子站的数据
//alert("i=" + i);
if (i < data.length - 1) {
if (currentsiteid == data[i + 1].SiteID) {
//如果跟下一个还是同一子站则循环读测量数据
continue;
}
}
//主循环体,按子站数量
//alert(currentsiteid);
var strlablefooter = "</table>";
var strwindowinfo = strlablehead + strlabledata + strlablefooter;
//alert("strwindowinfo" + strwindowinfo);
//初始化为""
strlabledata = "";
marker[i] = new BMap.Marker(point);
var label = new BMap.Label(data[i].SiteName, { "offset": new BMap.Size(20, -20) });
marker[i].setLabel(label);
map.addOverlay(marker[i]);
//闭包开始
(function() {
//var index = i;
var _iw = createInfoWindow(i);
var _marker = marker[i];
_marker.addEventListener("click", function(e) {
//设的跳转地址,暂时指到site.aspx
location.href = '/site/site.aspx';
});
_iw.addEventListener("open", function() {
_marker.getLabel().hide();
})
_iw.addEventListener("close", function() {
_marker.getLabel().show();
})
//闭包结束
/*
if (!!json.isOpen) {
label.hide();
_marker.openInfoWindow(_iw);
}
*/
// alert(data[i].AlarmID);
// //闪烁效果 有报警数据则处理
// var timeidi;
if (data[i].AlarmID > 1) {
//var isshow = 1;
//timeidi = window.setInterval("showwarn()", "200");//这样写不行,会提示找不到 showwarn函数,用下面的方式
//timeid[i] 为null 这个问题暂时没有解决,但不影响定时事件,待处理
timeid[i] = window.setInterval(function() {
//alert(timeid[i]);
if (isshow == 1) {
_marker.show();
isshow = 0;
}
else {
_marker.hide();
isshow = 1;
}
}, "500");
}
// //闪烁处理结束
_marker.addEventListener("mouseover", function() {
this.openInfoWindow(_iw);
window.clearInterval(timeid[i]);
});
})()
//window.setInterval("showwarn()", "200");
//JInterval(showwarn, 2000, marker[i]);
//创建InfoWindow
function createInfoWindow(i) {
var iw = new BMap.InfoWindow(strwindowinfo);
return iw;
}
//----------for end----------
}
}, "json");
</script>
</div>