利用百度地图api开发的应用实例

来源：互联网发布：js下载文件进度条编辑：程序博客网时间：2024/05/21 16:26
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>百度地图</title><style>html { height: 100% }body,dl,dt,dd,ul,ol,li,p{padding:0;margin:0;font:12px Arial,Sans-serif,"宋体";line-height: 1.4;height: 100%;}.mapdiv { height: 100% }#bbfmap{ height:100%;width:500px;float:left }#bbfctrlpanel{ height:100%;width:230px;float:left }##bbfctrlpanel div{overflow:hidden;width:230px}#bbfctrlpanel_head{height:100px;width:99px}#bbfctrlpanel_foot{height:30px;text-align:center;vertical-align:middle;background-color:#e8e8e8}#bbfresult{overflow-y:scroll;}#bbfresult td{font-size:12px;line-height:160%;padding:0 0 2px 3px;vertical-align:top;}#bbfresult p{color:#808080;}#bbfpagebar a{margin:0 10px;}.bbfBaiduMaplistImg{width:19px;height:25px;background-image:url(http://map.baidu.com/img/markers.png);}</style><script src="http://chs.cbms88.com/js/jquery-1.8.3.min.js"></script><script src="http://api.map.baidu.com/api?key=bbf&v=1.3&services=true" ></script><script><!--function bbfBaiduMap(opt) {var defaults = {//版本信息'version': '0.1',//气泡标题，2处@title'infoWindowTitle': '<p title="@title" style="width: 210px; font-family: arial,simsun,sans-serif; line-height: 16px; margin: 0pt; font-size: 14px; color: rgb(204, 85, 34); font-weight: bold; white-space: nowrap; overflow: hidden;">@title</p></div>',//气泡内容，1处@tr'infoWindowContent': '<div style="font: 12px arial,sans-serif;"><table cellspacing="0" style="table-layout: fixed; width: 100%; font: 12px arial,simsun,sans-serif;"><tbody>@tr</tbody></table></div>',//气泡内容单元，1处@type，1处@content'infoWindowContentTr': '<tr><td style="vertical-align: top; width: 38px; white-space: nowrap;">@type： </td><td>@content </td></tr>',//默认中心点，lng经度，lat纬度'centerPoint': { 'lng': 116.41667, 'lat': 39.91667 },//缩放级别'mapScale': 13,//地图容器'mapDiv': null,//结果容器'resultDiv': null,//地图对象'map': null,//搜索对象'search': null};var options = $.extend({}, defaults, opt || {});//设置参数options.mapDiv = $(options.mapDiv)[0];//地图对象须使用DOMoptions.map = new BMap.Map(options.mapDiv); //实例化对象options.map.centerAndZoom(new BMap.Point(options.centerPoint.lng, options.centerPoint.lat), options.mapScale); //设置中心点options.map.addControl(new BMap.NavigationControl()); //添加平移缩放控件options.map.addControl(new BMap.ScaleControl()); //添加比例尺控件options.map.addControl(new BMap.OverviewMapControl({ 'isOpen': true })); //添加缩略地图控件options.map.enableScrollWheelZoom(); //启用滚轮放大缩小。options.map.enableKeyboard(); //启用键盘操作。//设置本地搜索options.search = new BMap.LocalSearch('北京市', {onSearchComplete: function (result) {switch (options.search.getStatus()) {case BMAP_STATUS_SUCCESS: //数据返回成功{var html = bbfList(result); //自定义列表显示options.resultDiv.html(html);var point = result.getPoi(0).point; //获取第一个点，并设置为中心options.map.centerAndZoom(point, options.mapScale);break;}case BMAP_STATUS_UNKNOWN_LOCATION: //数据无返回{options.resultDiv.html('在北京市没有找到相关的地点。'); //列表错误提示break;}default: { break; }}}, renderOptions: {'map': options.map,'autoViewport': true,'selectFirstResult': true}});return options;}//自定义列表显示function bbfList(LocalResult) {var html = [], index = LocalResult.getPageIndex(); //获取结果页数html.push('<table border="0" style="width:100%">');for (var i = 0, l = LocalResult.getCurrentNumPois(); i < l; i++) {var poi = LocalResult.getPoi(i);html.push('<tr><td style="width:20px"><div class="bbfBaiduMaplistImg" style="background-position:-23px ');html.push(-25 * i);html.push('px"></div></td><td style="width:200px">');html.push('<a href="javascript:void(0)" onclick="showPointInfo(');html.push(i);html.push(',this)" addr="');if (poi.title) {html.push(poi.address.replace(/\"/g, ''));}html.push('" phone="');if (poi.phoneNumber) {html.push(poi.phoneNumber.replace(/\"/g, ''));}html.push('">');html.push(poi.title);html.push('</a>');html.push('<p>');if (poi.title) {html.push(poi.address);}if (poi.phoneNumber) {html.push('<br/>电话：');html.push(poi.phoneNumber);}html.push('</p></td></tr>');}html.push('</table><div id="bbfpagebar">');if (index > 0) {html.push('<a href="javascript:void(0)" onclick="ListtoPage(0);">首页</a>');html.push('<a href="javascript:void(0)" onclick="ListtoPage(');html.push(index - 1);html.push(');">上一页</a>');} else {html.push('<a href="javascript:void(0)" style="color:#000">首页</a>');html.push('<a href="javascript:void(0)" style="color:#000">上一页</a>');}var maxIndex = LocalResult.getNumPages() - 1;maxIndex = maxIndex > 75 ? 75 : maxIndex; //最大到75，api问题if (index < maxIndex) {html.push('<a href="javascript:void(0)" onclick="ListtoPage(');html.push(index + 1);html.push(');">下一页</a>');html.push('<a href="javascript:void(0)" onclick="ListtoPage(');html.push(maxIndex); //最大到75，api问题html.push(');">尾页</a>');} else {html.push('<a href="javascript:void(0)" style="color:#000">下一页</a>');html.push('<a href="javascript:void(0)" style="color:#000">尾页</a>');}html.push('</div>');html = html.join('');return html;}//开始搜索function searchfrombaidu() {//baidumap.map.centerAndZoom(new BMap.Point(baidumap.centerPoint.lng, baidumap.centerPoint.lat), baidumap.mapScale); //设置中心点baidumap.map.clearOverlays(); //清除标点//baidumap.search.searchInBounds($('#PoiSearch').val(), baidumap.map.getBounds()); //区域搜索baidumap.search.search($('#PoiSearch').val()); //搜索$('#bbfresult').html('正在载入...');}//分页function ListtoPage(index) {baidumap.map.clearOverlays(); //清除标点baidumap.search.gotoPage(index); //切换指定页}//点击列表，地图打开气泡function showPointInfo(index, linkobj) {//通过自定义属性，获取地址和电话linkobj = $(linkobj);var addr = linkobj.attr('addr');var phone = linkobj.attr('phone');addr = addr ? baidumap.infoWindowContentTr.replace('@content', addr).replace('@type', '地址') : '';phone = phone ? baidumap.infoWindowContentTr.replace('@content', phone).replace('@type', '电话') : '';var poi = baidumap.map.getOverlays()[index]; //查找相应的节点var infoWindow = new BMap.InfoWindow(baidumap.infoWindowContent.replace('@tr', addr + phone), {'width': 0,'height': 0,'title': baidumap.infoWindowTitle.replace(/@title/g, poi.getTitle())}); //创建信息窗口对象poi.openInfoWindow(infoWindow); //打开气泡}//重设大小function resetSize() {var bbfmap = $('#bbfmap'), bbfmapparent = bbfmap.parent();bbfmap.width(bbfmapparent.width() - $('#bbfctrlpanel').width());$('#bbfresult').height(bbfmapparent.height() - 150);}//绑定resize$(window).bind('resize', function () { resetSize(); });$(document).ready(function () {resetSize();});var baidumap = null;function initialize() {baidumap = bbfBaiduMap({'mapDiv': $('#bbfmap'),'resultDiv': $('#bbfresult')});}//--></script></head><body onload="initialize();"><div class="mapdiv"><div id="bbfmap">正在载入地图...</div><div id="bbfctrlpanel"><div style="clear:both"></div><div id="bbfctrlpanel_head" style="text-align:center"><a href="http://blog.csdn.net/u012488189?viewmode=contents" target="_blank"><img src="http://webmap1.map.bdstatic.com/wolfman/static/common/images/new-ui-logo_6be7d5e.png" style="border:0;width:220px;height:100px" alt="老刘的博客" /></a></div><div id="bbfctrlpanel_search" style="height:20px"><input type="text" id="PoiSearch" value="" style="width:130px" /><input type="button" onclick="searchfrombaidu()" value="查询" style="width:50px" /></div><div id="bbfresult"></div><div id="bbfctrlpanel_foot">技术支持：Jeryy liu</div></div> </div></body></html>