jquery - 用于控制 Bing 地图上的停靠点的菜单
问题描述
我有一张 Bing 地图,地图上通过地图图标指示了 2000 多个站点。我想在地图右侧有一个两级菜单,允许用户取消选中一个框,并且与一级或二级相关的所有地图图标都会从地图中消失。
我将我的经纬度信息放入变量中:
{ 'lat': 33.62884998, 'lng': -84.29331064, 'state': 'X', 'title': 'Route
01', 'description': 'here','icon'
:'http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png' },
{ 'lat': 32.88286, 'lng': -83.76431, 'state': 'X2', 'title': 'Route 02',
'description': 'there','icon'
:'http://maps.google.com/mapfiles/ms/icons/pink-pushpin.png' },
然后我使用函数来收集列表:
$(function () {
var uniqueStates = [];
initialData.forEach(function (ele) {
ele.visible = true; // add visible property to all pushPinData entries, set to true
if (!uniqueStates.some(v => v == ele.state)) { //add this state to the list of unique states if not already there
uniqueStates.push(ele.state);
}
});
uniqueStates.forEach(state => { //iterate through unique states
$("#controls").append("<div style=\"margin-top:0.5em;margin-bottom:0.5em\">"); //add dive to separate out groups by state
$("#controls").append("<div><label><input class=\"state-cb\" type=\"checkbox\" data-state=\"" + state + "\" checked>" + state + "</label></div>"); // add checkbox for specific state
var stateRoutes = initialData.filter(pin => { //get from pushPinInfos where the state matches the current state
return pin.state == state;
});
var uniqueStateRoutes = [];
stateRoutes.forEach(rte => { //iterate through routes for this state, from earlier
if (!uniqueStateRoutes.some(v => v == rte.title)) { //if unique route for state is not already in array, add it
uniqueStateRoutes.push(rte.title);
}
});
uniqueStateRoutes.forEach(uniqueRte => { //for each unique state, add a checkbox
$("#controls").append("<div><label><input id=\"" + state + uniqueRte + "\" class=\"route-cb " + uniqueRte + " " + state + "\" style=\"margin-left:1em\" type=\"checkbox\" data-state=\"" + state + "\" data-route=\"" + uniqueRte + "\" checked>" + uniqueRte + "</label></div>")
});
$("#controls").append("</div>"); //close div from earlier
});
$(".state-cb").change(function () { //bind state checkbox change handler
var checked = $(this).prop("checked");
var state = $(this).data("state");
$("." + state).prop("checked", checked); //select all checkboxes with same state class and set them checked or not.
});
$("#refresh").click(function () { //bind refresh button event handler
initialData.forEach(ele => {
var checked = $(".route-cb[data-route='" + ele.title + "'][data-state='" + ele.state + "']").prop("checked") ;//get whether related checkbox is checked
ele.visible = checked;
});
RefreshMap();
});
});
CollapsibleLists.applyTo(document.getElementById('state'));
function RefreshMap() {
var infoboxLayer = new Microsoft.Maps.EntityCollection();
var pinLayer = new Microsoft.Maps.EntityCollection();
var apiKey = "KEY HERE";
var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });
// Create the info box for the pushpin
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
infoboxLayer.push(pinInfobox);
var locs = [];
var data = initialData;
for (var i = 0; i < data.length; i++) {
var currentPushpin = data[i];
if (currentPushpin.visible) {
locs[i] = new Microsoft.Maps.Location(currentPushpin.lat, currentPushpin.lng);
var pin = new Microsoft.Maps.Pushpin(locs[i], { icon: currentPushpin.icon, width: '20px', height: '20px' });
pin.Title = currentPushpin.title;
pin.Description = currentPushpin.description;
pinLayer.push(pin);
Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
}
}
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
map.setView({ center: bestview.center, zoom: 5 });
}
访问该页面时,地图将显示所有站点。右侧的菜单将具有州和州下的路线。如果用户取消选中州,与该州关联的所有路线/站点将从地图上消失。如果用户只取消选中路线,则只有那些路线和停靠点将从地图上消失。
它就像现在一样工作。但是,菜单列表非常长。如果列表折叠到状态,那将是一个更好的用户体验。我怎样才能做到这一点?
解决方案
推荐阅读
- php - 从另一个网站获取信息 php
- ios - 如何为 UITableViewCell 返回 nil
- python - TF Eager 模式:如果可能,从磁盘加载完整的模型
- unity3d - Unity 2017.3.0f3 静态物体上的发射不一致
- amazon-cloudwatch - CloudWatch 警报计费
- javascript - jQuery滑块最小范围
- dart - Flutter ScrollController 附加到多个滚动视图
- list - 删除元组列表,但将冲突保留为列表
- regex - Apache 标头编辑上的正则表达式搜索和替换
- node.js - node.js https server.listen 抛出 getaddrinfo ENOTFOUND example.com