遇到的问题
在地图上点击一个marker,在弹出的信息里点击左边按钮传id1,点击右边按钮传id2,其中id1在接口中,id2在json中,怎么把id2绑在id1的后面呢,用~隔开。
思路
先获取接口的url,得到接口的信息列表,定义一个变量,用ajax的get请求去访问json,把返回来的数据给这个变量,然后for循环第一个接口的数据 正常处理数据,再for循环json的数据,把第一个接口的数据和json的数据都进行处理,即把id1~id2作连接。创建marker,marker中的经纬度用的是接口里的。(除了json里的id与接口的id作连接以外,其他数据都是用接口的。)那同时信息接口也要接受带有这样的参数。点击maker时,在弹出的弹框中,做判断如果有两个id 第一行显示id1,第二行显示id2,如果没有俩个id,那么两行都显示id1,同时设置左边按钮data-id=id1 右边data-id=id2。
注意事项
1.先加载接口的数据,因为你先用的接口数据。
2.要做~的判断,我是用的length来判断,也可以用indexof‘("")>-1来做,但是它返回的结果不是布尔类型,而是位置信息。
3.传一个id值的只显示左边按钮,传两个的两边都显示。
代码片段展示
getPortList: function () {
var url = this.config.listUrl;
this.ajax.get(url, null, true, this, function (res) {
if (res.state !== 1) {
console.error(res.msg.error);
} else {
var listinfo = res.msg.portlist;
var ports=null;
var url1 = "data/portList.json";
this.ajax.get(url1, null, true, this, function (res) {
ports=res;
for (var i = 0, len = listinfo.length; i < len; i++) {
var port = this.convertPortObj(listinfo[i]);//显示所有
for(var j=0,lens=ports.PortList.length;j<lens;j++){
if(ports.PortList[j].name==listinfo[i].portNameEn){
port = this.convertRelationPortObj(listinfo[i],ports.PortList[j]);//显示与json数据
}
}
var marker = this.createPortMarker(port, true);
if (this.ictmap.map.getZoom() < this.config.showLevel) {
marker.setOpacity(0);
marker.off("click", this.portClickEvt, this);
}
this.portLayerGroup.addLayer(marker);
}
},function(error){
console.error("获取!");
});
}
}, function (error) {
console.error("获取!");
});
},
convertRelationPortObj: function (obj,obj1) {
var oneobj = {};
oneobj.id = obj.id+'~'+obj1.id;//id1和id2的连接
oneobj.cc = obj.cc;
oneobj.lon = obj.lon / 600000;
oneobj.lat = obj.lat / 600000;
oneobj.name = obj.name;
return oneobj;
},
//显示弹框中做的判断
if(portobj.origId.length>7){
var infoid=portobj.origId.split("~")[0];
var hideid=portobj.origId.split("~")[1];
}else{
var infoid=portobj.id;
var hideid=portobj.id;
}
html.push('<tr><td>' + p1 + '</td><td>' + infoid + '</td></tr>');
html.push('<tr style="display:none;"><td></td><td></td></tr>');
html.push('<tr style="display:none;"><td>' + p1 + '</td><td>' + hideid + '</td></tr>')
html.push('<button type="button" class="portdetail" data-id="'+ infoid +'">'+ p13 +'</button>'); //左边按钮
html.push('<button type="button" class="relation" data-id="'+ hideid +'">'+ p14 +'</button>');//右边按钮
//传参数进去
//点击左边按钮事件传参
var portid = $(this).data("id");
window.open('resultpage/detail.html?param=' + portid;
//点击右边按钮事件传参
var portid = $(this).data("id");
window.open('resultpage/relation.html?param=' + portid;