利用百度地图api开发的应用实例
2013-11-23 17:27
183 查看
<!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];//地图对象须使用DOM
options.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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ASP.NET中使用HttpWebRequest调用WCF
- 新手使用 Nexus 出现的问题 （400-bad request missing request entity）
- Everything研究之读取NTFS下的USN日志文件(1)
- 汇编基础——常用汇编指令总结
- 触屏手机左右滑动js插件
- Log4J 配置之以日期为文件名的日志
- C# 创建新RTF文件
- Leetcode: sqrt (x)
- jni开发 - 使用Memory Analyzer tool(MAT)分析内存泄漏(三)
- Linux中EtherCAT主站执行过程
- Java过滤html标签
- 如何把照片变成素描
- 【转载】开发者是如何提升技能水平的
- 五分钟solr4.5教程（搭建、运行）
- Spring之通过servlet获取托管的对象
- Largest Rectangle in Histogram
- JAVA策略模式（3）之解决具体遇到的一个问题
- 金XX项目总结
- jxl 自定义背景颜色——十六进制转化为Colour
- 新浪微博客户端开发之adapter