百度地图api应用,百度地图gis
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图api应用,百度地图gis相关的知识，希望对你有一定的参考价值。
说明:如果是用asp.net开发添加的页面,须将页面上的
<!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=" 搜索 " οnclick="searchmap();" /><input id="txtpoint" type="text" /><input id="Button2" type="button" value=" 确定 " οnclick="Toopenner2();" /></div>
<div id="divresult">搜索结果(请从选项中选择你要的地点坐标):<br></div>
<div id="container" style="width: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="width: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>4 应用三
以上是关于百度地图api应用,百度地图gis的主要内容，如果未能解决你的问题，请参考以下文章