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 + '" onclick="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="搜索" onclick="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>