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

最新推荐文章于 2023-01-09 12:22:21 发布

liuyu2783

最新推荐文章于 2023-01-09 12:22:21 发布

阅读量3.8k

点赞数 1

分类专栏：前端技术

本文为“liuyu2783”原创文章，转载请表明出处。

本文链接：https://blog.csdn.net/u012488189/article/details/16903459

版权

前端技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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)" οnclick="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)" οnclick="ListtoPage(0);">首页</a>');
		html.push('<a href="javascript:void(0)" οnclick="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)" οnclick="ListtoPage(');
		html.push(index + 1);
		html.push(');">下一页</a>');
		html.push('<a href="javascript:void(0)" οnclick="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 οnlοad="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" οnclick="searchfrombaidu()" value="查询" style="width:50px" />
</div>
<div id="bbfresult"></div>
<div id="bbfctrlpanel_foot">
技术支持：Jeryy liu
</div>
</div> 
</div>
</body>
</html>

liuyu2783

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
利用百度地图api开发的应用实例

百度地图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;
复制链接

扫一扫