分页 搜索html,搜索+分页-标注列表-示例中心-JS API UI 组件示例 | 高德地图API

搜索+分页

#keywords {

position: absolute;

right: 310px;

top: 7px;

line-height: 200%;

padding: 0 5px;

font-size: 13;

border-radius: 3px;

border: 1px solid #ccc;

width: 150px;

}

//创建地图

var map = new AMap.Map('container', {

zoom: 9

});

AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'],

function(MarkerList, SimpleMarker, SimpleInfoWindow) {

//即jQuery/Zepto

var $ = MarkerList.utils.$;

var defaultIconStyle = function(index) {

return 'red-' + (index + 1);

}, //默认的图标样式

hoverIconStyle = function(index) {

return 'blue-' + (index + 1);

}, //鼠标hover时的样式

selectedIconStyle = function(index) {

return 'blue-' + (index + 1);

} //选中时的图标样式

;

var markerList = new MarkerList({

map: map,

//ListElement对应的父节点或者ID

listContainer: "myList", //document.getElementById("myList"),

//选中后显示

//从数据中读取位置, 返回lngLat

getPosition: function(item) {

return item.location;

},

//数据ID，如果不提供，默认使用数组索引，即index

getDataId: function(item, index) {

return item.id;

},

getInfoWindow: function(data, context, recycledInfoWindow) {

if (recycledInfoWindow) {

recycledInfoWindow.setInfoTitle(data.name);

recycledInfoWindow.setInfoBody(data.address);

return recycledInfoWindow;

}

return new SimpleInfoWindow({

infoTitle: data.name,

infoBody: data.address,

offset: new AMap.Pixel(0, -32)

});

},

//构造marker用的options对象, content和title支持模板，也可以是函数，返回marker实例，或者返回options对象

getMarker: function(data, context, recycledMarker) {

if (recycledMarker) {

recycledMarker.setIconStyle(defaultIconStyle(context.index));

return;

}

return new SimpleMarker({

iconTheme: 'numv1',

containerClassNames: 'my-marker',

iconStyle: defaultIconStyle(context.index),

});

},

//构造列表元素，与getMarker类似，可以是函数，返回一个dom元素，或者模板 html string

getListElement: function(data, context, recycledListElement) {

var label = '' + (context.index + 1);

//使用模板创建

var innerHTML = MarkerList.utils.template(

'' +

'

' +

' ' +

'

' +

'' +

'

' +

'

' +

' . ' +

' ' +

'

' +

'

地址：

' +

'' +

'

电话：

' +

'' +

'

' +

'

' +

'

data: data,

label: label

});

if (recycledListElement) {

recycledListElement.innerHTML = innerHTML;

return recycledListElement;

}

return '

' +

innerHTML +

'

';

},

//列表节点上监听的事件

listElementEvents: ['click', 'mouseenter', 'mouseleave'],

//marker上监听的事件

markerEvents: ['click', 'mouseover', 'mouseout'],

//makeSelectedEvents:false,

selectedClassNames: 'selected',

autoSetFitView: true

});

window.markerList = markerList;

AMap.plugin(["AMap.PlaceSearch"], function() {

var placeSearch = new AMap.PlaceSearch({ //构造地点查询类

pageSize: 5,

pageIndex: 1,

extensions: 'all',

city: "010" //城市

});

var $pagination = $('#pagination-demo');

function initPagination(page, totalPages) {

//初始化分页器

$pagination.twbsPagination({

totalPages: totalPages,

startPage: page,

prev: null,

first: '首页',

next: '下一页',

last: null,

initiateStartPageClick: false,

onPageClick: function(event, page) {

goPage(page);

}

});

}

var inited = false;

var $keywords = $('#keywords');

function goPage(page) {

//设置当前页

placeSearch.setPageIndex(page);

//关键字查询

placeSearch.search($keywords.val(), function(status, result) {

if (status !== 'complete') {

alert('返回数据出错!');

}

//render当前页的数据

markerList.render(result.poiList.pois);

if (!inited) {

inited = true;

//首次初始化

initPagination(page, Math.ceil(result.poiList.count / result.poiList.pageSize));

}

});

}

goPage(1);

$keywords.on('keypress', function(e) {

if (e.which === 13) {

inited = false;

$pagination.twbsPagination('destroy');

goPage(1);

}

});

});

markerList.on('selectedChanged', function(event, info) {

if (info.selected) {

if (info.selected.marker) {

//更新为选中样式

info.selected.marker.setIconStyle(selectedIconStyle(info.selected.index));

}

}

if (info.unSelected && info.unSelected.marker) {

//更新为默认样式

info.unSelected.marker.setIconStyle(defaultIconStyle(info.unSelected.index));

}

});

markerList.on('listElementMouseenter markerMouseover', function(event, record) {

if (record && record.marker) {

//非选中的id

if (!this.isSelectedDataId(record.id)) {

//设置为hover样式

record.marker.setIconStyle(hoverIconStyle(record.index));

//this.closeInfoWindow();

}

}

});

markerList.on('listElementMouseleave markerMouseout', function(event, record) {

if (record && record.marker) {

if (!this.isSelectedDataId(record.id)) {

//恢复默认样式

record.marker.setIconStyle(defaultIconStyle(record.index));

}

}

});

});