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>
