百度地图 自定义结果面板+分页+图层标注(标注点+搜索)
2015-05-06 19:08
501 查看
百度地图 自定义结果面板+分页+图层标注(标注点+搜索)
示例一：
示例二：
52个市场注册的时候可以填写经纬度来标注地理位置，这样后台就可以拿到这些地理位置进行描点标注。显示到前台的时候要显示到左侧栏，并将这些结果进行 分页显示。如果每页显示10条的话，这10条要以红色ABC来显示，剩余42个市场要以粉色的标注显示，并且点击这些标注要能直接定位。
最后的成型图是这样的：
做法很简单，步骤如下：
1.根据数据库中的经纬度描点，经纬度在后台可以通过转换json放到action上下文，前台用隐藏标签来绑定该值。我在这里是有两个放到上下文中，一个是当前10页，一个是后面的42个;
2.左边是一个Table，绑定的是当前10页的值，根据分页来传递参数获取值绑定到前台隐藏控件中；
3.组合起来就是上面的地图显示。
前台html代码
这里在<body>标签中用onload事件，这样可以在dom加载成功后加载JS事件，可以绑定到隐藏控件的值。$().ready()则不显示数据，具体区别可以去百度一下看看。
JS中加载的图片标注是提前将图片设置为1，2...这些数字，当循环的当前10条的时候，加载相对应的图片即可。
分页和后台的交互这里……
示例一：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F5dadeb87de65231081fe88229c124e2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<style type="text/css">
body, html{width: 100%;height: 100%; margin:0;font-family:"微软雅黑";}
#r-result{width:20%;height:90%}
#map{height:100%;width:79.9%;}
</style>
</head>
<body>
<div>
<input type="text" onkeypress="EnterPress()" style="width:16%;height:25px" id="txtContent">
<input type="button" style="width:50px;height:25px" id="search" value="搜索" onclick="searchMap()"/>
</div><br>
<div>
<div id="r-result" style="width:20%;float:left"></div>
<div style="width:79.9%;float:right;" id="map"></div>
</div>
</body>
</html>
<script type="text/javascript">
var markerArr = [
{ title: "名称：广州火车站", point: "113.264531,23.157003", address: "广东省广州市广州火车站", tel: "12306" },
{ title: "名称：广州塔（赤岗塔）", point: "113.330934,23.113401", address: "广东省广州市广州塔（赤岗塔） ", tel: "18500000000" },
{ title: "名称：广州动物园", point: "113.312213,23.147267", address: "广东省广州市广州动物园", tel: "18500000000" },
{ title: "名称：天河公园", point: "113.372867,23.134274", address: "广东省广州市天河公园", tel: "18500000000" }
];
function map_init(e) {
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(113.312213, 23.147267); //地图中心点，广州市
map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//地图、卫星、混合模式切换
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
//var ctrlSca = new window.BMap.ScaleControl({
// anchor: BMAP_ANCHOR_BOTTOM_LEFT
//});
// map.addControl(ctrlSca);
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].point.split(",")[0]; //
var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
//marker[i].setLabel(label);
// 创建信息窗口对象
info[i] = "<p style=’font-size:12px;lineheight:1.8em;’>" + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>";
//创建百度样式检索信息窗口对象
searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
title : markerArr[i].title, //标题
width : 290, //宽度
height : 55, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//添加点击事件
marker[i].addEventListener("click",
(function(k){
// js 闭包
return function(){
//map.centerAndZoom(point[k], 18);
//marker[k].openInfoWindow(info[k]);
searchInfoWindow[k].open(marker[k]);
}
})(i)
);
}
var local = new BMap.LocalSearch(map, {
renderOptions: {map: map, panel: "r-result"}
});
local.search(e);
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
document.body.appendChild(load);
}
//按输入的内容进行搜索
function searchMap(){
var content=document.getElementById("txtContent").value;
map_init(content);
}
//键盘回车事件
function EnterPress(){
if(event.keyCode == 13){
searchMap(); //调用输入框搜索事件
}
}
window.onload = map_load;
</script>示例二：
52个市场注册的时候可以填写经纬度来标注地理位置，这样后台就可以拿到这些地理位置进行描点标注。显示到前台的时候要显示到左侧栏，并将这些结果进行 分页显示。如果每页显示10条的话，这10条要以红色ABC来显示，剩余42个市场要以粉色的标注显示，并且点击这些标注要能直接定位。
最后的成型图是这样的：
做法很简单，步骤如下：
1.根据数据库中的经纬度描点，经纬度在后台可以通过转换json放到action上下文，前台用隐藏标签来绑定该值。我在这里是有两个放到上下文中，一个是当前10页，一个是后面的42个;
2.左边是一个Table，绑定的是当前10页的值，根据分页来传递参数获取值绑定到前台隐藏控件中；
3.组合起来就是上面的地图显示。
前台html代码
<body onload="map_init()">
<div style="width: 100%; height: 100%">
<div class="head_top" style="width: 100%; height: 7%; margin: 0px;">
<div class="head">
<div class="hd_logo">
<img style="padding-top: 13px; margin-left:-260px;padding-right:200px;"
src="${pageContext.request.contextPath}/images/hl_logo.png"
width="402" height="24" align="left" />
</div>
<div class="hl_menu">
<ul>
<li>
<a href="factoryTicketNumber_home.action"><span
class="Men_text"><img
src="${pageContext.request.contextPath}/images/home.png"
width="13" height="11" align="middle" /> 首页</span>
</a>
</li>
<li class="active">
<a href="market_testmap.action"><span class="Men_text"><img
src="${pageContext.request.contextPath}/images/dt2.png"
width="11" height="15" align="middle" /> 地图</span>
</a>
</li>
<li>
<a href="purchaseinfoAction_publicdailyTrading.action"><span class="Men_text"><img
src="${pageContext.request.contextPath}/images/gwc.png"
width="13" height="11" align="middle" /> 每日交易</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div style="clear:both"></div>
<div id="r-result"
style="overflow-y: scroll; width: 19.9%, height:80%; float: left">
<form action="market_testmap.action" method="post">
<table class="table table-bordered table-striped" height="80%"
style="border-collapse: collapse; border: none; font-size: 13px">
<tbody id="TableData" class="dataContainer" datakey="factoryList">
<s:iterator value="recordList" id="list" status="status">
<tr class="TableDetail1 template">
<td style="padding: 5px 10px;">
<div>
<img height="25px"
src="${pageContext.request.contextPath}/images/mapimage/${status.count}.png" />
<a href="#" value="${list[0]}" onclick="showInfoWindow(this)">${list[0]}</a>
<!-- onclick="searchName(this) -->
</div>
<div>
地址：${list[1]}
</div>
<div>
电话：${list[3]}
</div>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</form>
<%@ include file="/WEB-INF/common/pageViewMap.jspf"%>
</div>
<div style="width: 80%, height : 80%; float: right;" id="map"></div>
<div style="clear:both">
<input type="hidden" id="txtContent">
<s:hidden name="mapValue" id="mapValue" />
<s:hidden name="mapOtherValue" id="mapOtherValue" />
</div>
<div
style="clear:both;width: 100%; height: 5%; background: #171717; text-align: center; float: left; line-height: 35px;">
<a class="aa">关于我们</a><a class="aa">联系我们</a><a
class="aa">隐私权和使用条例</a><a class="aa">服务</a><a
class="aa">反馈</a>
</div>
</div>
</body>这里在<body>标签中用onload事件，这样可以在dom加载成功后加载JS事件，可以绑定到隐藏控件的值。$().ready()则不显示数据，具体区别可以去百度一下看看。
<script type="text/javascript">
function gotoPage( pageNum ){
$(document.forms[0]).append("<input type='hidden' name='pageNum' value='" + pageNum +"'/>");
document.forms[0].submit();
}
function map_init(e) {
var markerArr = document.getElementById("mapValue"); //这里是当前页的 Json
markerArr =eval(markerArr.value);
var markerArrOther =document.getElementById("mapOtherValue"); //这里获取的是剩余的 地图Json
markerArrOther =eval(markerArrOther.value);
var map = new BMap.Map("map"); // 创建Map实例
var point = new BMap.Point(116.302771, 39.963603); //地图中心点，海淀区
map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
//地图、卫星、混合模式切换
map.addControl( new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
isOpen: 1
});
map.addControl(ctrlOve);
//添加全景 控件
var stCtrl = new BMap.PanoramaControl(); //构造全景控件
stCtrl.setOffset(new BMap.Size(40, 40));
map.addControl(stCtrl);//添加全景控件
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
var point = new Array(); //存放标注点经纬信息的数组
var marker = new Array(); //存放标注点对象的数组
var info = new Array(); //存放提示信息窗口对象的数组
var searchInfoWindow =new Array();//存放检索信息窗口对象的数组
var pointOther =new Array(); //同上 一样，只不过这里是剩余的查看 Json数组
var markerOther =new Array();
var infoOther =new Array();
var searchInfoWindowOther =new Array();
for (var i = 0; i < markerArr.length; i++) {
var p0 = markerArr[i].longitude; //
var p1 = markerArr[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来
point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
var iconImg = new BMap.Icon('${pageContext.request.contextPath}/images/mapimage/'+(i+1)+'.png', new BMap.Size(32, 47), {
anchor: new BMap.Size(10, 30)
});
marker[i] = new window.BMap.Marker(point[i],{icon:iconImg}); //按照地图点坐标生成标记
map.addOverlay(marker[i]);
var label = new window.BMap.Label(markerArr[i].name, { offset: new window.BMap.Size(20, -10) });
// 创建信息窗口对象
info[i] = '<p style="width:280px;margin:0;line-height:20px;">市场名称：' + markerArr[i].name + '</br>地址：' + markerArr[i].address + '</br> 电话：' + markerArr[i].contactPhone + '</p>';
//infoOther[i] = '<p style="width:280px;margin:0;line-height:20px;">市场名称：' + markerArrOther[i].name + '</br>地址：' + markerArrOther[i].address + '</br> 电话：' + markerArrOther[i].contactPhone + '</p>';
//创建百度样式检索信息窗口对象
searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
title : markerArr[i].name, //标题
width : 290, //宽度
height : 55, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//判断当前点击的是否有数据
if(e!="" && e== markerArr[i].name ){
searchInfoWindow[i].open(marker[i]);
}
//添加点击事件
marker[i].addEventListener("click",
(function(k){
// js 闭包
return function(){
searchInfoWindow[k].open(marker[k]);
}
})(i)
);
}
//从这里写新的Json
for (var i = 0; i < markerArrOther.length; i++) {
var p0 = markerArrOther[i].longitude; //
var p1 = markerArrOther[i].latitude; //按照原数组的point格式将地图点坐标的经纬度分别提出来
pointOther[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
var iconImgOther = new BMap.Icon('${pageContext.request.contextPath}/images/mapimage/11.png', new BMap.Size(20, 30), {
anchor: new BMap.Size(10, 30)
});
markerOther[i] = new window.BMap.Marker(pointOther[i],{icon:iconImgOther}); //按照地图点坐标生成标记
map.addOverlay(markerOther[i]);
var labelOther = new window.BMap.Label(markerArrOther[i].name, { offset: new window.BMap.Size(20, -10) });
// 创建信息窗口对象
infoOther[i] = '<p style="width:280px;margin:0;line-height:20px;">市场名称：' + markerArrOther[i].name + '</br>地址：' + markerArrOther[i].address + '</br> 电话：' + markerArrOther[i].contactPhone + '</p>';
//创建百度样式检索信息窗口对象
searchInfoWindowOther[i] = new BMapLib.SearchInfoWindow(map, infoOther[i], {
title : markerArrOther[i].name, //标题
width : 290, //宽度
height : 55, //高度
panel : "panel", //检索结果面板
enableAutoPan : true, //自动平移
searchTypes :[
BMAPLIB_TAB_SEARCH, //周边检索
BMAPLIB_TAB_TO_HERE, //到这里去
BMAPLIB_TAB_FROM_HERE //从这里出发
]
});
//添加点击事件
markerOther[i].addEventListener("click",
(function(k){
// js 闭包
return function(){
searchInfoWindowOther[k].open(markerOther[k]);
}
})(i)
);
}
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
document.body.appendChild(load);
}
//显示信息弹框
function showInfoWindow(obj){
var a = $(obj).attr('value');
document.getElementById("txtContent").value=a;
map_init(a);
}
</script>JS中加载的图片标注是提前将图片设置为1，2...这些数字，当循环的当前10条的时候，加载相对应的图片即可。
分页和后台的交互这里……
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图：自定义结果面板+分页+图层标注
- 百度地图的覆盖物自定义（三）--自定义搜索结果+标注+覆盖物
- android百度地图开发--自定义最短路径搜索图层
- 百度地图开发（ 基于新版本V2_1_1）— 覆盖物(2)_Poi搜索结果图层（PoiOverlay）
- android百度地图开发--自定义最短路径搜索图层
- 百度地图使用 自定义标注的图标
- lucene 自定义评分 (给lucene自带的评分*我们filed的系数) 如搜索结果时间的加权
- 百度地图添加自定义图层
- js中百度地图API获取本地搜索全部结果自定义显示效果
- 百度地图－自定义搜索、自定义marker、地图选址实用实例
- js中百度地图API获取本地搜索全部结果自定义显示效果
- DedeCMS搜索结果页面调用自定义字段的方法
- 怎样在百度地图上标注上自己公司的名称使别人能在搜索百度地图的同时在地图上能看见本公司地址？
- IOS 设置百度地图自定义标注图片，自定义泡泡
- iOS - 百度地图最基本操作(定位,手势添加自定义标注)
- 百度地图上自定义添加一个标注
- Android 百度地图POI检索之显示单次搜索的所有结果
- 百度地图的覆盖物自定义（一）--标注物的自定义
- 百度地图之六标注行走路线搜索
- Siteserver-stl:searchOutput(搜索结果)自定义显示样式