ASP.NET百度地圖API使用

發表日期：2016-10-07 文章編輯：南昌開優網絡瀏覽次數：4612 標簽：ASP.NET應用

1、點擊選擇彈出百度地圖，在地圖中點擊并獲取座標 html頁面

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>百度地圖API地點搜索-獲取經緯度DEMO</title> 
<meta name="description" content="百度地圖地點搜索和鼠標點擊地點獲取經緯度，這些都是地圖比較基本和實用的代碼，其中還包括了根據用戶IP進行地圖的顯示、改變地圖上的鼠標樣式、啟用滾輪縮放" /> 
<meta name="keywords" content="百度地圖,地點搜索,獲取經緯度,改變地圖鼠標樣式,啟用滾輪縮放" /> 
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> 
    <script type="text/javascript">  //獲取父級頁面的 座標 文件框 
        var xz = window.parent.document.getElementById("ctl00_ContentBody_txtxz"); 
        var yz = window.parent.document.getElementById("ctl00_ContentBody_txtyz");       
    </script>   
</head> 
<body> 
<form action="" method="get"> 
<label> 
地點：</label> 
<input id="where" name="where" type="text"> 
<input type="button" value="地圖上找" onclick="sear(document.getElementById('where').value);" /> 
<div style="width: 520px; height: 340px; border: 1px solid gray" id="container"> 
</div> 
經度： 
<input id="txtxz" name="lonlat" type="text" /> 
緯度：<input id="txtyz" name="lonlat" type="text" /> 
</form> 
<script type="text/javascript"> 
//在指定的容器內創建地圖實例 
var map = new BMap.Map("container"); 

map.setDefaultCursor("crosshair"); //設置地圖默認的鼠標指針樣式 
map.enableScrollWheelZoom(); //啟用滾輪放大縮小，默認禁用。 
//創建點坐標 
var point = new BMap.Point(115.907721, 28.667952); 
//初始化地圖，設置中心點坐標和地圖級別 
map.centerAndZoom(point, 13); 
//panTo()方法 等待兩秒鐘后-讓地圖平滑移動至新中心點 
/**window.setTimeout(function(){ 
map.panTo(new BMap.Point(120.386266, 30.307407)); }, 2000);**/ 
//***********************地址解析類 
var gc = new BMap.Geocoder(); 
//向map中添加--------------------------------------控件 
/**地圖API中提供的控件有： 
Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實現自定義控件。 
NavigationControl：地圖平移縮放控件，默認位于地圖左上方，它包含控制地圖的平移和縮放的功能。 
OverviewMapControl：縮略地圖控件，默認位于地圖右下方，是一個可折疊的縮略地圖。 
ScaleControl：比例尺控件，默認位于地圖左下方，顯示地圖的比例關系。 
MapTypeControl：地圖類型控件，默認位于地圖右上方。 
CopyrightControl：版權控件，默認位于地圖左下方。 
**/ 
//NavigationControl 地圖平移縮放控件，默認位于地圖左上方 它包含控制地圖的平移和縮放的功能。 
map.addControl(new BMap.NavigationControl()); 
//OverviewMapControl 縮略地圖控件，默認位于地圖右下方，是一個可折疊的縮略地圖 
map.addControl(new BMap.OverviewMapControl()); 
//ScaleControl：比例尺控件，默認位于地圖左下方，顯示地圖的比例關系。 
map.addControl(new BMap.ScaleControl()); 
//MapTypeControl：地圖類型控件，默認位于地圖右上方。 
map.addControl(new BMap.MapTypeControl()); 
//CopyrightControl：版權控件，默認位于地圖左下方 
map.addControl(new BMap.CopyrightControl()); 

//----------------------------------------------地圖覆蓋物 
/**地圖API提供了如下幾種覆蓋物： 
Overlay：覆蓋物的抽象基類，所有的覆蓋物均繼承此類的方法。 
Marker：標注表示地圖上的點，可自定義標注的圖標。 
Label：表示地圖上的文本標注，您可以自定義標注的文本內容。 
Polyline：表示地圖上的折線。 
Polygon：表示地圖上的多邊形。多邊形類似于閉合的折線，另外您也可以為其添加填充顏色。 
Circle: 表示地圖上的圓。 
InfoWindow：信息窗口也是一種特殊的覆蓋物，它可以展示更為豐富的文字和多媒體信息。注意：同一時刻只能有一個信息窗口在地圖上打開。 
可以使用map.addOverlay方法向地圖添加覆蓋物，使用map.removeOverlay方法移除覆蓋物，注意此方法不適用于InfoWindow。 
**/ 
// 創建標注 
var marker = new BMap.Marker(point); 
// 將標注添加到地圖中 
map.addOverlay(marker); 
//********************************************監聽標注事件 
//點擊事件 
marker.addEventListener("click", function (e) { 
document.getElementById("txtxz").value = e.point.lng; 
document.getElementById("txtyz").value = e.point.lat; 
//xz.value = e.point.lng;  //父級窗口中  座標 文本框的值 
//yz.value = e.point.lat;            
//document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat; 
}); 
//*******************************************可托拽的標注 
//marker的enableDragging和disableDragging方法可用來開啟和關閉標注的拖拽功能。 
marker.enableDragging(); 
//監聽標注的dragend事件來捕獲拖拽后標注的最新位置 
marker.addEventListener("dragend", function (e) { 
gc.getLocation(e.point, function (rs) { 
showLocationInfo(e.point, rs); 
}); 
}); 

//*****************************信息窗口 
//顯示地址信息窗口 
function showLocationInfo(pt, rs) { 
var opts = { 
width: 250, //信息窗口寬度 
height: 150, //信息窗口高度 
title: "當前位置" //信息窗口標題 
} 

var addComp = rs.addressComponents; 
var addr = "當前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber + "<br/>"; 
addr += "緯度: " + pt.lat + ", " + "經度：" + pt.lng; 

var infoWindow = new BMap.InfoWindow(addr, opts); //創建信息窗口對象 
marker.openInfoWindow(infoWindow); 
} 

map.addEventListener("click", function (e) {//地圖單擊事件 
document.getElementById("txtxz").value = e.point.lng; 
document.getElementById("txtyz").value = e.point.lat; 
// xz.value = e.point.lng;  //父級窗口中  座標 文本框的值 
// yz.value = e.point.lat;            
// document.getElementById("lonlat").value = e.point.lng + ", " + e.point.lat; 
}); 

//**************************** 目前百度地圖提供的圖層包括： 
//TrafficLayer：交通流量圖層 
// 創建交通流量圖層實例 
var traffic = new BMap.TrafficLayer(); 
// 將圖層添加到地圖上 
map.addTileLayer(traffic); 
/** 
百度地圖提供了交互功能更為復雜的“工具”，它包括： 
PushpinTool：標注工具。通過此工具用戶可在地圖任意區域添加標注。 
DistanceTool：測距工具。通過此工具用戶可測量地圖上任意位置之間的距離。 
DragAndZoomTool：區域縮放工具。此工具將根據用戶拖拽繪制的矩形區域大小對地圖進行放大或縮小操作。 
**/ 
// 創建標注工具實例 
//var myPushpin = new BMap.PushpinTool(map); 
// 監聽事件，提示標注點坐標信息 
//myPushpin.addEventListener("markend",function(e){ 
// alert("你標注的位置:"+e.point.lng+","+e.point.lat); 
//}); 
// 開啟標注工具 
//myPushpin.open(); 


function iploac(result) {//根據IP設置地圖中心 
var cityName = result.name; 
//map.setCenter(cityName); 
} 
var myCity = new BMap.LocalCity(); 
myCity.get(iploac); 
function sear(result) {//地圖搜索 
var local = new BMap.LocalSearch(map, { 
renderOptions: { map: map } 
}); 
local.search(result); 
} 
</script> 
<script type="text/javascript"> 
var _gaq = _gaq || []; 
_gaq.push(['_setAccount', 'UA-12599330-14']); 
_gaq.push(['_trackPageview']); 

(function () { 
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
})(); 
</script> 
</body> 
</html>

2、獲取座標保存至數據庫中，在前臺顯示出來 aspx頁面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="baiduMap.aspx.cs" Inherits="XiaobinManage.Web.baiduMap" %> 
<!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?v=1.2"></script> 
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script> 
<style> 
.lll{color: #000; 
text-decoration: none;} 
.cityList{height: 320px; 
width: 372px; 
overflow-y: auto;} 
.sel_container{position: absolute; 
top: 0; 
font-size: 12px;} 
.map_popup{position: absolute; 
z-index: 200000; 
width: 382px; 
height: 344px; 
top: 20px;} 
.map_popup .popup_main{background: #fff; 
border: 1px solid #8BA4D8; 
height: 100%; 
overflow: hidden; 
position: absolute; 
width: 100%; 
z-index: 2;} 
.map_popup .title{background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent; 
color: #6688CC; 
font-size: 12px; 
font-weight: bold; 
height: 24px; 
line-height: 25px; 
padding-left: 7px;} 
.map_popup button{background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent; 
border: 0 none; 
cursor: pointer; 
height: 12px; 
position: absolute; 
right: 4px; 
top: 6px; 
width: 12px;}
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div style="width:230px; height:275px; border: 1px solid gray" id="container"> 
</div> 
<script type="text/javascript"> 
// 標注點數組 
var BASEDATA = [ 
<%=BaiduMap()%> 
// { url: "javascript:void(0)", title: "南昌三星大廈", content: "站前西路", point: "115.905744|28.668096" } ,
// { url: "javascript:void(0)", title: "南昌三星大廈", content: "站前西路", point: "115.905744|28.668096" } 
] 
var map = new BMap.Map("container"); // 創建Map實例 
for (var i = 0; i < BASEDATA.length; i++) { 
var p = BASEDATA[i].point; 
var p_x = p.split('|')[0]; 
var p_y = p.split('|')[1]; 
if (i == 0) { 
var point = new BMap.Point(p_x, p_y); // 創建點坐標 
map.centerAndZoom(point, 14); // 初始化地圖,設置中心點坐標和地圖級別。 
} 
var label = new BMap.Label("<a target='_blank' class='lll' href='" + BASEDATA[i].url + "'><b>" + BASEDATA[i].title + "</b></a><br/>" + BASEDATA[i].content, { "offset": new BMap.Size(-70, -40) }); //設置label 
var point1 = new BMap.Point(p_x, p_y); 
addMarker(point1, label); 
} 
map.enableScrollWheelZoom(); // 啟用滾輪放大縮小。 
//map.enableKeyboard(); // 啟用鍵盤操作。 
map.addControl(new BMap.NavigationControl()); //增加縮略 

// 編寫自定義函數,創建標注 
function addMarker(p, l) { 
var marker = new BMap.Marker(p); // 創建標注 
marker.setLabel(l); //添加label 

map.addOverlay(marker); // 將標注添加到地圖中 
l.setStyle({//設置lable樣式 
borderColor: "#808080", 
color: "#333", 
cursor: "pointer", 
padding: "2px" 
}); 
} 
</script> 
</form> 
</body> 
</html>

public string BaiduMap()

{

string str = "";

string id = Request.QueryString["id"];

int x;

if (int.TryParse(id, out x))

{

Model.Cases c = cdal.GetModel(x);

str = "{ url: \"javascript:void(0)\", title: \""+c.title+"\", content: \""+c.address+"\", point: \"" + c.xz + "|" + c.yz + "\" }";

}

return str;

}