C#显示百度地图API.doc

/wiki/static/map/API/examples/?v=1.3&2_0#2&0太原市的经纬度：112.596, 37.884北京市的经纬度：116.404, 39.915/ JScript 文件代码示例/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(/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(); ;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 = ; 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(/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(); s.push(); s.push(); 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 = background-color:#f0f0f0; openInfoWinFun(); s.push(); s.push( ); s.push( + results.getPoi(i).title.replace(new RegExp(results.keyword,g), + results.keyword + ) + ); s.push( - + results.getPoi(i).address + ); s.push(); s.push(); s.push(); document.getElementById(results).innerHTML = s.join(); ;/ 添加标注function addMarker(point, index) var myIcon = new BMap.Icon(/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 = +poi.title+; / infowindow的显示信息 var infoWindowHtml = ; infoWindowHtml.push(); infoWindowHtml.push(); infoWindowHtml.push( + name + ); infoWindowHtml.push( + poi.address + ); infoWindowHtml.push(); infoWindowHtml.push(); 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条数据。精准查找，如：【贵国酒店】,模糊查找,如【酒店】或【图书馆】*/自家数据+前端搜索精准查找模糊查找仅查找到的内容显示所有内容 / 标注点数组 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,sall|!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_oi.checked) t_v = t_oi.value; for(var i = 0; i s_o.length; i+) if(s_oi.checked) s_v = s_oi.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;idata.length;i+) var json = datai; 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( + json.title + +json.content+); return iw; /创建一个Icon function createIcon(json) var icon = new BMap.Icon(/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