當前位置：首頁 > 编程语言 > C# >内容正文

C#

C#显示百度地图API

發布時間：2025/5/22 C# 77 豆豆

生活随笔收集整理的這篇文章主要介紹了 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>

</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>

????// ?標注點數組

????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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

地图
API

上一篇： 55.Jump Game
下一篇： Nginx学习之HTTP/2.0配置