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="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;100%;font:12px arial,simsun,sans-serif"><tbody>');

    infoWindowHtml.push('<tr>');

    infoWindowHtml.push('<td style="vertical-align:top;line-height:16px;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,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="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="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 xa0u3000]+)|([u3000xa0s ]+$)/g, "");

    }

    

    

    initMap();//创建和初始化地图

</script>