C#显示百度地图API
http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&2_0#2&0
?
太原市的經緯度：112.596, 37.884
北京市的經緯度：116.404, 39.915
// JScript 文件代碼示例http://dev.baidu.com/wiki/static/map/API/examples/?v=1.3&7_8#7&8
/************************地圖初始化時,添加了十個自定義標注圖標,且是這十個圖標是在一張圖片中**************************/
var?map = new?BMap.Map("container");
var?point = new?BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
?
// 編寫自定義函數,創建標注
function?addMarker(point, index){
??var?myIcon = new?BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/ico-1-9.png",new?BMap.Size(28, 37),
//也可以用本地圖片var myIcon = new BMap.Icon("./Images/xiao.png",new BMap.Size(28, 37),
??{
?????offset: new?BMap.Size(10, 25),imageOffset: new?BMap.Size(0 - index * 28, 0)
??});
??
??var?marker = new?BMap.Marker(point, {icon: myIcon});
??map.addOverlay(marker);
}
?
?
// 隨機向地圖添加10個標注
var?bounds = map.getBounds();
var?sw = bounds.getSouthWest();
var?ne = bounds.getNorthEast();
var?lngSpan = Math.abs(sw.lng - ne.lng);
var?latSpan = Math.abs(ne.lat - sw.lat);
for?(var?i = 0; i < 25; i ++) {
??var?point = new?BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
??addMarker(point,i);
}
/*******************給出一個關鍵字搜索相關名字并在地圖下方輸出*******************/
var?map = new?BMap.Map("container");
map.centerAndZoom(new?BMap.Point(116.404, 39.915), 10);
?
var?options = {
??onSearchComplete: function(results){
????// 判斷狀態是否正確
????if?(local.getStatus() == BMAP_STATUS_SUCCESS){
??????var?s = [];
??????for?(var?i = 0; i < results.getCurrentNumPois(); i ++){
????????s.push(results.getPoi(i).title + ", "?+ results.getPoi(i).address);
??????}
??????document.getElementById("results").innerHTML = s.join("<br/>");
????}
??}
};
var?local = new?BMap.LocalSearch(map, options);
local.search("廟");
/*********************指定地點進行搜索***********************/
var?map = new?BMap.Map("container");
map.centerAndZoom(new?BMap.Point(116.404, 39.915), 11);
?
var?local = new?BMap.LocalSearch(map, {
??renderOptions:{map: map, autoViewport:true}
});
local.searchNearby("小吃", "前門");
/**************************根據指定地址找到地圖上的經緯度***********************/
var?map = new?BMap.Map("container");
map.centerAndZoom(new?BMap.Point(112.404, 37.915), 11);
// 創建地址解析器實例
var?myGeo = new?BMap.Geocoder();
// 將地址解析結果顯示在地圖上,并調整地圖視野
myGeo.getPoint("迎澤西大街", function(point){
??if?(point) {
????map.centerAndZoom(point, 16);
????map.addOverlay(new?BMap.Marker(point));
??}
}, "太原市");
/******************IP定位*****************************/
var?map = new?BMap.Map("container"); ???????????// 創建Map實例
var?point = new?BMap.Point(116.404, 39.915); ???// 創建點坐標
map.centerAndZoom(point,15);
?
function?myFun(result){
????var?cityName = result.name;
????map.setCenter(cityName);
????alert(cityName);
}
var?myCity = new?BMap.LocalCity();
myCity.get(myFun);
/********************點擊地圖發出反應************************/
var?map = new?BMap.Map("container");
map.centerAndZoom(new?BMap.Point(116.404, 39.915), 11);
map.addEventListener("click", function(){
??alert("您點擊了地圖。");
});
/****************右側地圖加載完成后,拖拽地圖,在地圖的右上方能顯示當前拖拽點的經緯度。***************/
var?map = new?BMap.Map("container"); ???????????????????????// 創建Map實例
map.centerAndZoom(new?BMap.Point(112.596, 37.884), 11); ????// 初始化地圖,設置中心點坐標和地圖級別
?
var?opts = {anchor: BMAP_ANCHOR_TOP_RIGHT, offset: new?BMap.Size(10, 30),type: BMAP_NAVIGATION_CONTROL_SMALL};//指定魚骨頭控件的位置，樣式
map.addControl(new?BMap.NavigationControl(opts)); ??????????????// 添加平移縮放控件魚骨頭控件
/**/
map.addControl(new?BMap.ScaleControl()); ???????????????????// 添加比例尺控件
map.addControl(new?BMap.OverviewMapControl());??????????????//添加縮略地圖控件
?
map.enableScrollWheelZoom(); ?????????????????// 啟用滾輪放大縮小。
map.enableKeyboard(); ????????????????????????// 啟用鍵盤操作。
?
/*右上角有地圖類型控件。可根據MapType設置顯示哪些地圖類型，還可以設置該控件的樣式。*/
map.addControl(new?BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
map.addControl(new?BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
?
?
map.addEventListener("dragend", function(){
??var?center = map.getCenter();
??document.getElementById("info").innerHTML = center.lng + ", "?+ center.lat;
});
/********************地圖初始化時,隨機添加了25個標注。可添加更多。***********************/
?
var?map = new?BMap.Map("container");
var?point = new?BMap.Point(112.596, 37.884);
map.centerAndZoom(point, 15);
?
// 編寫自定義函數,創建標注
function?addMarker(point){
??var?marker = new?BMap.Marker(point);
??map.addOverlay(marker);
}
?
// 隨機向地圖添加25個標注
var?bounds = map.getBounds();
var?sw = bounds.getSouthWest();
var?ne = bounds.getNorthEast();
var?lngSpan = Math.abs(sw.lng - ne.lng);
var?latSpan = Math.abs(ne.lat - sw.lat);
for?(var?i = 0; i < 25; i ++) {
??var?point = new?BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
??addMarker(point);
}
/************************地圖初始化時,添加了十個自定義標注圖標,且是這十個圖標是在一張圖片中。***********************************/
var?map = new?BMap.Map("container");
var?point = new?BMap.Point(112.596, 37.884);
map.centerAndZoom(point, 15);
?
// 編寫自定義函數,創建標注
function?addMarker(point, index){
??var?myIcon = new?BMap.Icon("http://dev.baidu.com/wiki/static/map/API/examples/images/ico-1-9.png",new?BMap.Size(28, 37),
??{
?????offset: new?BMap.Size(10, 25),
??imageOffset: new?BMap.Size(0 - index * 28, 0)
??});
??
??var?marker = new?BMap.Marker(point, {icon: myIcon});
??map.addOverlay(marker);
}
?
// 隨機向地圖添加10個標注
var?bounds = map.getBounds();
var?sw = bounds.getSouthWest();
var?ne = bounds.getNorthEast();
var?lngSpan = Math.abs(sw.lng - ne.lng);
var?latSpan = Math.abs(ne.lat - sw.lat);
for?(var?i = 0; i < 25; i ++) {
??var?point = new?BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
??addMarker(point,i);
}
/************************給標注添加了一個click事件,您可以點擊右側地圖中的標注看看。******************************/
var?map = new?BMap.Map("container");
var?point = new?BMap.Point(116.404, 39.915);
var?marker = new?BMap.Marker(point);
map.centerAndZoom(point, 15);
map.addOverlay(marker);
marker.addEventListener("click", function(){ ??
??alert("您點擊了標注"); ??
});
?
/*****************搜索公交線路并在地方下方輸出***********************/
?
var?map = new?BMap.Map("container");
map.centerAndZoom(new?BMap.Point(116.404, 39.915), 15);
window.openInfoWinFuns = null;
var?options = {
??onSearchComplete: function(results){
????// 判斷狀態是否正確
????if?(local.getStatus() == BMAP_STATUS_SUCCESS){
????????var?s = [];
????????s.push('<div style="font-family: arial,sans-serif; border: 1px solid rgb(153, 153, 153); font-size: 12px;">');
????????s.push('<div style="background: none repeat scroll 0% 0% rgb(255, 255, 255);">');
????????s.push('<ol style="list-style: none outside none; padding: 0pt; margin: 0pt;">');
????????openInfoWinFuns = [];
????????for?(var?i = 0; i < results.getCurrentNumPois(); i ++){
????????????var?marker = addMarker(results.getPoi(i).point,i);
????????????var?openInfoWinFun = addInfoWindow(marker,results.getPoi(i),i);
????????????openInfoWinFuns.push(openInfoWinFun);
????????????// 默認打開第一標注的信息窗口
????????????var?selected = "";
????????????if(i == 0){
????????????????selected = "";
????????????????openInfoWinFun();
????????????}
????????????s.push('<li id="list'?+ i + '" style="margin: 2px 0pt; padding: 0pt 5px 0pt 3px; cursor: pointer; overflow: hidden; line-height: 17px;'?+ selected + '" οnclick="openInfoWinFuns['?+ i + ']()">');
????????????s.push('<span style="width:1px;background:url(http://api.map.baidu.com/bmap/red_labels.gif) 0 '?+ ( 2 - i*20 ) + 'px no-repeat;padding-left:10px;margin-right:3px"> </span>');
????????????s.push('<span style="color:#00c;text-decoration:underline">'?+ results.getPoi(i).title.replace(new?RegExp(results.keyword,"g"),'<b>'?+ results.keyword + '</b>') + '</span>');
????????????s.push('<span style="color:#666;"> - '?+ results.getPoi(i).address + '</span>');
????????????s.push('</li>');
????????????s.push('');
????????}
????????s.push('</ol></div></div>');
????????document.getElementById("results").innerHTML = s.join("");
????}
??}
};
?
// 添加標注
function?addMarker(point, index){
??var?myIcon = new?BMap.Icon("http://api.map.baidu.com/img/markers.png", new?BMap.Size(23, 25), {
????offset: new?BMap.Size(10, 25),
????imageOffset: new?BMap.Size(0, 0 - index * 25)
??});
??var?marker = new?BMap.Marker(point, {icon: myIcon});
??map.addOverlay(marker);
??return?marker;
}
// 添加信息窗口
function?addInfoWindow(marker,poi,index){
????var?maxLen = 10;
????var?name = null;
????if(poi.type == BMAP_POI_TYPE_NORMAL){
????????name = "地址：??"
????}else?if(poi.type == BMAP_POI_TYPE_BUSSTOP){
????????name = "公交：??"
????}else?if(poi.type == BMAP_POI_TYPE_SUBSTOP){
????????name = "地鐵：??"
????}
????// infowindow的標題
????var?infoWindowTitle = '<div style="font-weight:bold;color:#CE5521;font-size:14px">'+poi.title+'</div>';
????// infowindow的顯示信息
????var?infoWindowHtml = [];
????infoWindowHtml.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>');
????infoWindowHtml.push('<tr>');
????infoWindowHtml.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">'?+ name + '</td>');
????infoWindowHtml.push('<td style="vertical-align:top;line-height:16px">'?+ poi.address + ' </td>');
????infoWindowHtml.push('</tr>');
????infoWindowHtml.push('</tbody></table>');
????var?infoWindow = new?BMap.InfoWindow(infoWindowHtml.join(""),{title:infoWindowTitle,width:200});
????var?openInfoWinFun = function(){
????????marker.openInfoWindow(infoWindow);
????????for(var?cnt = 0; cnt < maxLen; cnt++){
????????????if(!document.getElementById("list"?+ cnt)){continue;}
????????????if(cnt == index){
????????????????document.getElementById("list"?+ cnt).style.backgroundColor = "#f0f0f0";
????????????}else{
????????????????document.getElementById("list"?+ cnt).style.backgroundColor = "#fff";
????????????}
????????}
????}
????marker.addEventListener("click", openInfoWinFun);
????return?openInfoWinFun;
}
var?local = new?BMap.LocalSearch(map, options);
local.search("魏公村");
/*****************用用戶自己的數據在百度地圖上顯示，數據可以直接存儲在頁面中，然后用JS實現搜索及顯示;信息窗口打開查找到的第一條數據。此樣例帶酒店和圖書館各10條數據。
精準查找，如：【貴國酒店】,模糊查找,如【酒店】或【圖書館】***********************/
?
<!DOCTYPE?html>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html; charset=gb2312"?/>
<title>自家數據+前端搜索</title>
<script?type="text/javascript"?src="http://api.map.baidu.com/api?v=1.3"></script>
</head>
<body>
<div?style="width:520px;height:340px;border:1px solid gray"?id="Div1"></div>
<div><input?id="type1"?type="radio"?name="type"?value="single"/><label?for="type1">精準查找</label><input?id="type2"?type="radio"?name="type"?value="more"?checked="checked"/><label?for="type2">模糊查找</label></div><div><input?id="show1"?type="radio"?name="show"?value=""?checked="checked"/><label?for="show1">僅查找到的內容</label><input?id="show2"?type="radio"?name="show"?value="all"/><label?for="show2">顯示所有內容</label></div><div><input?id="keyword"?type="text"?style="width:150px;"?value="酒店"/>?<input?type="button"?value="搜索"?οnclick="search('type','show','keyword')"/></div>?
</body>
</html>
<script?type="text/javascript">
????// ?標注點數組
????var?BASEDATA = [
????????????{title:"奧亞酒店",content:"北苑路號",point:"116.422792|40.009471",isOpen:1,icon:{w:21,h:21,l:115,t:46,x:1,lb:10}},
????????????{title:"珀麗酒店",content:"將臺西路號",point:"116.484289|39.97936",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"貴國酒店",content:"左家莊號",point:"116.454494|39.964011",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"科通酒店",content:"民族園路號院號樓",point:"116.394601|39.987925",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"將臺酒店",content:"酒仙橋路甲號",point:"116.496024|39.976864",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"成宏酒店",content:"北四環東路惠新東橋西北側",point:"116.429445|39.995392",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"華商酒店",content:"延靜西里號",point:"116.488962|39.921939",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"標華酒店",content:"北京市朝陽區紅廟路柴家灣號",point:"116.489284|39.92104",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"萬程酒店",content:"天壇路號",point:"116.411762|39.89457",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"黎昌酒店",content:"永定門外彭莊乙號",point:"116.393532|39.876272",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"北京圖書館",content:"北京市海淀區白石橋路號",point:"116.329593|39.952398",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"海淀圖書館",content:"丹棱街西門",point:"116.315551|39.984388",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"北京圖書館",content:"北京市西城區文津街附近",point:"116.391713|39.929007",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"首都圖書館",content:"東三環南路號",point:"116.469899|39.87684",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"國家圖書館",content:"中關村南大街號",point:"116.331292|39.949031",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"崇文區圖書館",content:"北京市崇文區花市大街號（樂天瑪特超市旁）的敕建火德真君廟內",point:"116.427671|39.903568",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"朝陽區圖書館",content:"北京市朝陽區朝外小莊金臺里號",point:"116.47766|39.922295",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"宣武區圖書館",content:"教子胡同號",point:"116.374561|39.894302",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"東城區圖書館",content:"交道口東大街號",point:"116.41927|39.9474",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}},
????????????{title:"西城區圖書館",content:"北京市西城區后廣平胡同號",point:"116.368099|39.942332",isOpen:0,icon:{w:21,h:21,l:0,t:0,x:6,lb:5}}
?????????]
?????????
????//創建和初始化地圖函數：
????function?initMap(){
????????window.map = new?BMap.Map("container");
????????map.centerAndZoom(new?BMap.Point(116.412318,39.887037),12);
????????map.enableScrollWheelZoom();
?????map.addControl(new?BMap.NavigationControl());
????????window.searchClass = new?SearchClass();
????????searchClass.setData(BASEDATA)
????????var?dd = searchClass.search({k:"title",d:"圖書館",t:"more",s:""});//t:{single|more},s{all|!all}
????????addMarker(dd);//向地圖中添加marker
????}
????window.search = function(name_t,name_s,id_d){
????????var?t_o = document.getElementsByName(name_t);
????????var?s_o = document.getElementsByName(name_s);
????????var?s_v,t_v,d_v = document.getElementById(id_d).value;
????????for(var?i = 0; i < t_o.length; i++){
????????????if(t_o[i].checked){
????????????????t_v = t_o[i].value;
????????????}
????????}
????????for(var?i = 0; i < s_o.length; i++){
????????????if(s_o[i].checked){
????????????????s_v = s_o[i].value;
????????????}
????????}
????????searchClass.trim(t_v) == ""?&& (t_v = "single");
????????var?dd = searchClass.search({k:"title",d:d_v,t:t_v,s:s_v});
????????addMarker(dd);//向地圖中添加marker
????}
????
????//創建marker
????window.addMarker = function?(data){
????????map.clearOverlays();
????????for(var?i=0;i<data.length;i++){
????????????var?json = data[i];
????????????var?p0 = json.point.split("|")[0];
????????????var?p1 = json.point.split("|")[1];
????????????var?point = new?BMap.Point(p0,p1);
????????????var?iconImg = createIcon(json.icon);
????????????var?marker = new?BMap.Marker(point,{icon:iconImg});
????????????var?iw = createInfoWindow(i);
????????????var?label = new?BMap.Label(json.title,{"offset":new?BMap.Size(json.icon.lb-json.icon.x+10,-20)});
????????????marker.setLabel(label);
????????????map.addOverlay(marker);
????????????label.setStyle({
????????????????????????borderColor:"#808080",
????????????????????????color:"#333",
????????????????????????cursor:"pointer"
????????????});
?
????????????(function(){
????var?_json = json;
????var?_iw = createInfoWindow(_json);
????var?_marker = marker;
????_marker.addEventListener("click",function(){
????????this.openInfoWindow(_iw);
???????});
???????_iw.addEventListener("open",function(){
????????_marker.getLabel().hide();
???????})
???????_iw.addEventListener("close",function(){
????????_marker.getLabel().show();
???????})
????label.addEventListener("click",function(){
????????_marker.openInfoWindow(_iw);
???????})
????if(!!json.isOpen){
?????label.hide();
?????_marker.openInfoWindow(_iw);
????}
???})()
????????}
????}
????//創建InfoWindow
????function?createInfoWindow(json){
????????var?iw = new?BMap.InfoWindow("<b class='iw_poi_title' title='"?+ json.title + "'>"?+ json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
????????return?iw;
????}
????//創建一個Icon
????function?createIcon(json){
????????var?icon = new?BMap.Icon("http://dev.baidu.com/wiki/static/map/API/img/ico-marker.gif", new?BMap.Size(json.w,json.h),{imageOffset: new?BMap.Size(-json.l,-json.t),infoWindowAnchor:new?BMap.Size(json.lb+5,1),offset:new?BMap.Size(json.x,json.h)})
????????return?icon;
????}
????
????function?SearchClass(data){
????????this.datas = data;
????}
????// rule = {k:"title",d:"酒店",s:"all",t:"single"}=>t{single:(key=?),more:(key like[%?%])}//t:{single|more},s{all|!all}
????SearchClass.prototype.search = function(rule){
????????if(this.datas == null){alert("數據不存在!");return?false;}
????????if(this.trim(rule) == ""?|| this.trim(rule.d) == ""?|| this.trim(rule.k) == ""?|| this.trim(rule.t) == ""){alert("請指定要搜索內容!");return?false;}
????????var?reval = [];
????????var?datas = this.datas;
????????var?len = datas.length;
????????var?me = this;
????????var?ruleReg = new?RegExp(this.trim(rule.d));
????????var?hasOpen = false;
????????
????????var?addData = function(data,isOpen){
????????????// 第一條數據打開信息窗口
????????????if(isOpen && !hasOpen){
????????????????hasOpen = true;
????????????????data.isOpen = 1;
????????????}else{
????????????????data.isOpen = 0;
????????????}
????????????reval.push(data);
????????}
????????var?getData = function(data,key){
????????????var?ks = me.trim(key).split(/\./);
????????????var?i = null,s = "data";
????????????if(ks.length == 0){
????????????????return?data;
????????????}else{
????????????????for(var?i = 0; i < ks.length; i++){
????????????????????s += '["'?+ ks[i] + '"]';
????????????????}
????????????????return?eval(s);
????????????}
????????}
????????for(var?cnt = 0; cnt < len; cnt++){
????????????var?data = datas[cnt];
????????????var?d = getData(data,rule.k);
????????????if(rule.t == "single"?&& rule.d == d){
????????????????addData(data,true);
????????????}else?if(rule.t != "single"?&& ruleReg.test(d)){
????????????????addData(data,true);
????????????}else?if(rule.s == "all"){
????????????????addData(data,false);
????????????}
????????}
????????return?reval;
????}
????SearchClass.prototype.setData = function(data){
????????this.datas = data;
????}
????SearchClass.prototype.trim = function(str){
?????if(str == null){str = "";}else{ str = str.toString();}
????????return?str.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
????}
????
????
????initMap();//創建和初始化地圖
</script>
轉載于:https://www.cnblogs.com/cyh328863397/p/7470823.html
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
以上是生活随笔為你收集整理的C#显示百度地图API的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 55.Jump Game
- 下一篇： Nginx学习之HTTP/2.0配置