I have five check boxes that appear on the page:
> const content = document.getElementById('content');
const routes = {
'ATL6101': ['4200 N COMMERCE DR,30344-5707','822 RALPH MCGILL BLVD NE,30306','','','','','','','','','','','','','','','Purple'],
'ATL6102': ['4200 N COMMERCE DR,30344-5707','4575 WEBB BRIDGE RD,30005','','','','','','','','','','','','','','','Lime'],
'ATL6103': ['4200 N COMMERCE DR,30344-5707','520 W PONCE DE LEON AVE,30030','','','','','','','','','','','','','','','Maroon'],
'ATL6104': ['4200 N COMMERCE DR,30344-5707','575 OLYMPIC DR,30601','','','','','','','','','','','','','','','Navy'],
'ATL6105': ['4200 N COMMERCE DR,30344-5707','3470 MCCLURE BRIDGE RD,30096','','','','','','','','','','','','','','','Yellow'],
};
let selectedRoutes = [];
for (routeValue in routes) {
const label = document.createElement('label');
const input = document.createElement('input');
const text = document.createTextNode(routeValue);
input.type = 'checkbox';
input.value = routeValue;
input.addEventListener('click', e => {
if (e.target.checked) {
selectedRoutes.push(e.target.value);
} else {
selectedRoutes.splice(selectedRoutes.indexOf(e.target.value), 1);
}
});
label.appendChild(input);
label.appendChild(text);
content.appendChild(label);
};
And I have a Bing Map that has all the routes:
function GetMap()
{
map = new Microsoft.Maps.Map('#myMap', {
// center: new Microsoft.Maps.Location(47.7, -122.14),
zoom: 7
});
//Load the directions module.
Microsoft.Maps.loadModule('Microsoft.Maps.Directions', function () {
//Generate some routes.
getRoute('4200 N COMMERCE DR,30344-5707','822 RALPH MCGILL BLVD NE,30306','','','','','','','','','','','','','','','Pink','ATL6101');
getRoute('4200 N COMMERCE DR,30344-5707','4575 WEBB BRIDGE RD,30005','','','','','','','','','','','','','','','Lime','ATL6102');
getRoute('4200 N COMMERCE DR,30344-5707','520 W PONCE DE LEON AVE,30030','','','','','','','','','','','','','','','Red','ATL6103');
getRoute('4200 N COMMERCE DR,30344-5707','575 OLYMPIC DR,30601','','','','','','','','','','','','','','','Navy','ATL6104');
getRoute('4200 N COMMERCE DR,30344-5707','3470 MCCLURE BRIDGE RD,30096','','','','','','','','','','','','','','','Yellow','ATL6105');
});
}
Information based on what the user has checked appears below the map but all the routes are on the map all the time. I need to have the route hidden if the user did not check the box next to the route name. How do I add to the GetMap function code that says if the route is not checked by the user don't appear?
Aucun commentaire:
Enregistrer un commentaire