您的位置:首页 > Web前端 > JavaScript

js中如何自定义一个map集合

2016-04-09 14:39 645 查看
//自定义map集合

function HashMap(){

this.map = {};

}

HashMap.prototype = {

put : function(key , value){

this.map[key] = value;

},

get : function(key){

if(this.map.hasOwnProperty(key)){

return this.map[key];

}

return null;

},

remove : function(key){

if(this.map.hasOwnProperty(key)){

return delete this.map[key];

}

return false;

},

removeAll : function(){

this.map = {};

return true;

},

keySet : function(){

var _keys = [];

for(var i in this.map){

_keys.push(i);

}

return _keys;

},

getSize:function(){

var j=0;

for(var i in this.map){

j++;

}

return j;

}

};

HashMap.prototype.constructor = HashMap;

var history_store = new Array();

var history_max = 10; //历史缓存个数

var base_path = "/sims/gis/";

var map = new HashMap();

$(function() {

$("#btn_search").click(function() {

searchRefresh(false);

$(".search_panel").show();

search($("#search_key").val());

});

$("#search_key").keypress(function(evt) {

if (evt.keyCode == 13) {

searchRefresh(false);

$(".search_panel").show();

search($("#search_key").val());

}

});

$("#btn_clear").click(function() {

searchRefresh(true);

});

$(document).on("mouseover", ".show_detail", function(){

showDetail(this);

});

$(document).on("mouseout",".show_detail", function(){

AT.fate("500", 1);

});

$("#menu ul li a").click(function() {

if ($(this).attr("type") == "city" && $(this).attr("name") == "1") {

addPoint(116.516, 40.115);

centerAt(116.516, 40.115);

} else if ($(this).attr("type") == "city" && $(this).attr("name") == "2") {

addPoint(121.487, 31.262);

centerAt(121.487, 31.262);

} else if ($(this).attr("type") == "city" && $(this).attr("name") == "3") {

addPoint(114.31667, 30.51667);

centerAt(114.31667, 30.51667);

}

});

});

function searchRefresh(rk) {

if(rk)

$("#search_key").val("");

//清空图形

for (var i = myMap.graphics.graphics.length - 1; i >= 0; i--) {

var graph = myMap.graphics.graphics[i];

if (graph.attributes != null && graph.attributes.type == "search") {

myMap.graphics.remove(graph);

}

}

myMap.graphics.redraw();

//清空结果列表

$("#search_result").find("li").remove();

}

function search(key) {

map.removeAll();

$.getJSON(base_path+"search?key=" + key, function(store) {

$("#search_result").find("li").remove();

var res = {"objs": store};

//载入查到的结果集

loadResultList(res.objs, "");

//载入点到地图上显示

loadPoints(res);

// myMap.setZoom(0);

//如果有数据就以第一个查到的点进行锁定

if(res.objs.length != 0)

centerAt(res.objs[0].longitude, res.objs[0].latitude);

//载入历史记录

loadHistory(history_store);

//这次查找的使用的关键字也表存起来这是个json数据的动态添加

res.key = key;

//给他加个id值就是以当前时间作为标准为int型

res.sid = parseInt(new Date().getTime()/1000);

//把这次查到的数据都添加到历史记录中方便下次可以取

history_store.push(res);

if(history_store.length>history_max){

//把数组中的第一个数据移出并返回

var hs = history_store.shift();

for(var i in myMap.graphics.graphics){

var graph = myMap.graphics.graphics[i];

if(graph.attributes != null && graph.attributes.type == "search" && graph.attributes.id == hs.sid){

myMap.graphics.remove(graph);

}

}

myMap.graphics.redraw();

}

});

}

function loadHistory(store) {

var obj = "<li>";

obj += "<a onclick=toggleHistory(this) >+折叠历史</a>";

obj += "<a style='margin-right:10px' onclick='clearHistory()' >清空历史</a>";

obj += "</li>";

$("#search_result").append(obj);

for (var i in store) {

obj = "<li class='history_res history_title'>";

obj += "<input name=" + store[i].sid + " type='checkbox' onclick=coverHistory(this) value='0' />";

obj += "<span>关键字:" + store[i].key + "</span>";

obj += "</li>";

$("#search_result").append(obj);

loadResultList(store[i].objs, "history_res");

}

$('.history_res').toggle();

}

function loadResultList(objs, cls) {

for (var i in objs) {

var obj = "<li name='" + objs[i].id + "' type='" + objs[i].type + "' class='" + cls + "' >";

obj += "<span>" + objs[i].name + "</span>";

obj += "<div class='li_op'>";

obj += "<a onclick='centerAt(" + objs[i].longitude + ", " + objs[i].latitude + ")'>定位至</a>";

obj += "<a onclick='showDetail(\""+objs[i].id+"\",\""+objs[i].type+"\")'>详情</a>";

obj += "</div>";

obj += "<p>" + objs[i].detail + "</p>"

obj += "</li>";

$("#search_result").append(obj);

}

}

function loadPoints(store) {

for (var i in store.objs) {

addPoint(store.objs[i], store.sid);

}

}

function addPoint(obj,id){

var pt = new esri.geometry.Point(obj.longitude,obj.latitude,myMap.spatialReference);

var attr = {"type": "search","id": id,"Xcoord":obj.longitude,"Ycoord":obj.latitude,"Description":obj.detail};

if(obj.type=='tbcity'){

var sms = new esri.symbol.PictureMarkerSymbol("images/city.png",25,25);

}

else if(obj.type=='tbdam'){

var sms = new esri.symbol.PictureMarkerSymbol("images/dam.png",25,25);

}

else if(obj.type=='tboildepot'){

var sms = new esri.symbol.PictureMarkerSymbol("images/oil.png",30,30);

}

var infoTemplate = new esri.InfoTemplate("结果信息","X坐标:${Xcoord} <br/>Y坐标: ${Ycoord} <br/>备注:${Description}");

var graphic = new esri.Graphic(pt,sms,attr,infoTemplate);

myMap.graphics.add(graphic);

}

function toggleHistory(ele) {

$('.history_res').toggle();

if ($(ele).text() == '-折叠历史')

$(ele).text('+折叠历史');

else

$(ele).text('-折叠历史');

}

function coverHistory(ele) {

var sid = parseInt($(ele).attr("name"));

if ($(ele).val() == "0") {

$(ele).val("1");

for(var i in history_store){

if(history_store[i].sid == sid)

loadPoints(history_store[i]);

}

} else {

$(ele).val("0");

for (var j = myMap.graphics.graphics.length - 1; j >= 0; j--) {

var graph = myMap.graphics.graphics[j];

if (graph.attributes != null && graph.attributes.type == "search" && graph.attributes.id == sid) {

myMap.graphics.remove(graph);

}

}

myMap.graphics.redraw();

}

}

//清空历史记录

function clearHistory() {

for (var i = 0; i < history_store.length; i++) {

for (var j = myMap.graphics.graphics.length - 1; j >= 0; j--) {

var graph = myMap.graphics.graphics[j];

if (graph.attributes != null && graph.attributes.type == "search" && graph.attributes.id == i) {

myMap.graphics.remove(graph);

}

}

}

myMap.graphics.redraw();

history_store = new Array();

$(".history_res").remove();

}

//显示细节

function showDetail(id,type){

var value = map.get(id);

if(value!=null){

alert(value);

return;

}

$.getJSON(base_path+"getDetail?kid="+id+"&type="+type, function(obj){

var text ="";

for(var i=1;i<obj.size;i++){

var j ="data"+i;

text+=obj[j]+" ";

}

map.put(obj["data0"],text);

alert(text);

});

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: