我有一个大约25个点的Leaflet地图，其中点的顺序很重要，我试图使编号的顺序可见。目前，每个点及其弹出窗口的数据都存在于JavaScript数组中。
var sites = [
{
"lat": 38.608491,
"lng": -90.156654,
"area": "South End Sites (South of Broadway, west of and including 10th)",
"intersection": "",
"address": "1535 Tudor Avenue",
"notes": "True Light Baptist Church",
"description": "The bell of this church rang as both warning and call to arms in 1917. The violence that erupted on July 2 was long-simmering. For months ahead of time, the African American community prepared for the possibility of violence, and part of that preparation was the use of church bells as a warning that trouble was imminent. Whites harassed the South End neighborhood regularly over that summer. On the night of July 1, a carload of assailants drove along Market Street while firing shots into homes. The church bell rang out, calling the community to defend itself. Armed African Americans came into the streets to defend their neighborhood, and it was this particular response that was presented at trial as evidence that African Americans, not whites, started the conflict."
},
{
"lat": 38.608857,
"lng": -90.151939,
"area": "South End Sites (South of Broadway, west of and including 10th)",
"intersection": "",
"address": "1700 Bond Avenue",
"notes": "Leroy Bundy Home Site",
"description": "Dr. Leroy Bundy was a leader of the African-American community in 1917. He lived near here at 1700 Bond Avenue. He stood trial for causing the riot and was found guilty on false testimony. He was sentenced to life in prison, but was exonerated by the Illinois Supreme Court."
},
{
"lat": 38.616667,
"lng": -90.159205,
"area": "South End Sites (South of Broadway, west of and including 10th)",
"intersection": "11th and McCasland",
"address": "11th Street and McCasland Avenue",
"notes": "",
"description": "White rioters passed through this part of the South End, targeting homes for violence. Houses were burned and shots were fired at fleeing victims. Buildings here were destroyed, with notable damage on the southwest corner of the intersection."
},
{
"lat": 38.617005,
"lng": -90.161173,
"area": "South End Sites (South of Broadway, west of and including 10th)",
"intersection": "10th and Bond Avenue",
"address": "10th Street and Bond Avenue",
"notes": "",
"description": "When the bell of True Light Church rang to alert the neighborhood, an unmarked police car was dispatched to investigate. African American neighbors, already tense from the earlier shooting and assembled by the church bell, fired shots at the car, unknowingly killing two police officers. This was the event that sparked the rampage the following morning."
},
{
"lat": 38.615779,
"lng": -90.16282,
"area": "South End Sites (South of Broadway, west of and including 10th)",
"intersection": "10th and Trendley Avenue",
"address": "10th Street and Trendley Avenue",
"notes": "",
"description": "White rioters, having done damage to the homes further west of here, attempted to push their destruction deeper into the South End beyond 10th Street. The neighbors here were organized and ready. Snipers were in place and, after a few shots were fired, the rioters retreated. There was still considerable damage in this area."
},
{
"lat": 38.615271,
"lng": -90.163521,
"area": "South End Sites (South of Broadway, west of and including 10th)",
"intersection": "10th and Piggott Avenue",
"address": "10th Street and Piggott Avenue",
"notes": "",
"description": "This is the intersection where the Municipal Bridge (then called the “Free” bridge, because it did not charge a toll) from St. Louis connected to East St. Louis. It had opened in January 1917 and was a primary way for people living in the South End to cross over to St. Louis. During the violence, victims attempted to flee across the river to safety. White rioters attempted to block the way. Luella Cox, a white woman from St. Louis who had crossed the bridge as part of her nonprofit work, started directing families to flee across the bridge. One woman was grabbed by rioters and beheaded at this site, according to Mrs. Cox’s testimony. Eventually, the rioters were driven away and many hundreds of families fled across the bridge to safety."
},
{
"lat": 38.622647,
"lng": -90.158953,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "",
"address": "700 East Broadway",
"notes": "",
"description": "The Broadway “Opera House” was an empty theater that stood on this site. It was rumored that many African-Americans were burned to death inside. Bystanders claimed to have seen people seek refuge in the basement of the building. No remains were identified in the ashes."
},
{
"lat": 38.621925,
"lng": -90.158104,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "8th and East Broadway, southeast corner",
"address": "South 8th Street and East Broadway",
"notes": "",
"description": "Otto Nelson lived here at 741a East Broadway, near the Opera House. He was the city’s only African American detective and he was turned against during the riot. He and his wife were forced to hide in the weeds as their home was destroyed. They survived."
},
{
"lat": 38.621326,
"lng": -90.158944,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "South 8th and Walnut, northeast corner",
"address": "South 8th Street and Walnut",
"notes": "",
"description": "Mary Edwards, age 23, lived at 23 South Eight Street, just north of this site. She knew at 10 a.m. that there was fighting going on, but did not think the trouble would come as far as Eighth Street. It did and white rioters were shooting into the homes and setting fire to them. She survived."
},
{
"lat": 38.620156,
"lng": -90.160627,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "8th and Brady Avenue, northeast corner",
"address": "South 8th Street and Brady Avenue",
"notes": "",
"description": "The railroad crossing that was at this site was of the Southern Railway tracks. The night of the massacre, rail cars were parked on the tracks. Armed men stood along the tracks while others started fires in the nearby houses. As African Americans would flee, they would be gunned down by the men standing along these tracks."
},
{
"lat": 38.622134,
"lng": -90.16163,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "South 6th and Railroad Avenue / James R. Thompson Blvd., adjacent to ESL HEC",
"address": "South 6th Street and Railroad Avenue",
"notes": "These two streets currently don't intersect",
"description": "At 7:30 p.m. on the evening of the massacre, over 100 African-Americans barricaded themselves in two homes near this site. They were armed and provided strong resistance to the white rioters. An Illinois National Guard officer arranged a cease-fire and the African-Americans were escorted to St. Louis."
},
{
"lat": 38.623103,
"lng": -90.162765,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "North 5th and Railroad Avenue / James R. Thompson Blvd. adjacent to ESL HEC",
"address": "North 5th Street and Railroad Avenue",
"notes": "",
"description": "The most severe property damage followed the Southern Railway tracks that ran along this street. Many African-American families lived in the homes adjacent to the tracks, and the tracks at the time had dozens of rail cars sitting still on them. Some fled their homes and hid among the freight. Rioters burned the railcars and the homes."
},
{
"lat": 38.623846,
"lng": -90.163633,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "North 4th and Railroad Avenue / James R. Thompson Blvd., entrance to ESL HEC",
"address": "North 4th Street and Railroad Avenue",
"notes": "",
"description": "The residence at this site belonged to Scott Clark and his wife Iva. Rioters set fire to the Clark residence while the couple hid in the cellar. After the walls collapsed, they fled to the house next door. Rioters burned that house and the Clarks fled. They ran along the railroad tracks where they found a guardsman, who seemingly offered protection. The three of them proceeded to South 4th Street and headed toward East Broadway, cutting through an alley. A mob attacked the Clarks and the guardsman did nothing. Mr. Clark was struck in the head with an iron bar and a rope placed around his neck. He pleaded for his life. The rioters attempted to hang him but the rope was too short, so they dragged him instead. He died of strangulation four days later."
},
{
"lat": 38.624813,
"lng": -90.16155,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "South 4th Street Spur and East Broadway, to the west of fountain of Youth Park",
"address": "South 4th Street spur and East Broadway",
"notes": "",
"description": "This intersection was the apex of the violence. There were many African-American residences and business nearby that were destroyed. Post-Dispatch reporters counted six corpses on the street and witnessed a lynching here. The Illinois National Guard did not intervene. The body was left hanging from a street lamp for hours."
},
{
"lat": 38.624813,
"lng": -90.16155,
"area": "Franklin Park Sites (South of Broadway, East of 10th)",
"intersection": "South 4th Street and East Broadway, to the east of fountain of Youth Park",
"address": "South 4th Street and East Broadway",
"notes": "",
"description": "One of the first actions of the mob was to stop a streetcar, which was easily done by pulling the overhead trolleys from the charged electric wire that gave the car power. There is an infamous picture of a streetcar being stopped near this spot. White rioters attack African-American passengers while soldiers stand and watch."
},
{
"lat": 38.625431,
"lng": -90.160706,
"area": "Downtown / Olivette Park Sites (North of Broadway, south of I-64)",
"intersection": "North 4th and Division Avenue, southwest corner",
"address": "North 4th Street and Division Avenue",
"notes": "",
"description": "At this site, police described how the cremated body of a boy was found, as if he were hiding under a bed when the flames consumed him. Narsis Gurlie lived only a few houses south, and gave the following statement to W. E. B. DuBois during his investigation of the massacre: “Between five and six o'clock we noticed a house nearby burning and heard the men outside. We were afraid to come outside and remained in the house, which caught fire from the other house. When the house began falling in we ran out, terribly burned, and one white man said, ‘Let those old women alone.’ We were allowed to escape. Lost everything, clothing and household goods.”"
},
{
"lat": 38.6279,
"lng": -90.160954,
"area": "Downtown / Olivette Park Sites (North of Broadway, south of I-64)",
"intersection": "North 3rd and Missouri Avenue, southwest corner, Old City Hall and police buildings",
"address": "North 3rd Street and Missouri Avenue",
"notes": "",
"description": "This is near the city of the municipal building complex, which included the City Hall, police department, and fire station. The actual address was 115 North Main Street, on the west side of the present city hall. The bloody police car in which Officers Coppedge and Wadley died was parked outside the station for all to see. It was blood-soaked and riddled with holes. On the night of the massacre, five hundred men, women, and children spent the night in the police station for safety, and hundreds more in the city hall auditorium."
},
{
"lat": 38.627808,
"lng": -90.157664,
"area": "Downtown / Olivette Park Sites (North of Broadway, south of I-64)",
"intersection": "Collinsville Avenue and St. Louis Avenue, northwest corner, approximate site of Labor Temple meeting",
"address": "Collinsville Avenue and St. Louis Avenue",
"notes": "",
"description": "White rioters assembled near this intersection, listened to inflammatory speeches, and marched in military formation toward East Broadway. Richard Brockway, a white man who inflamed the crowd near this spot, was later arrested convicted and sentenced to prison for the crime of rioting."
},
{
"lat": 38.628462,
"lng": -90.144608,
"area": "Downtown / Olivette Park Sites (North of Broadway, south of I-64)",
"intersection": "",
"address": "1010 Pennsylvania Avenue",
"notes": "",
"description": "This site was the home of Mayor Malbern M. Stephens, the city’s longest serving mayor and the only mayor who brought peace and prosperity to the city. He was first elected in 1887 and made the city into the industrial center it became. He actively recruited industry to the city, including Aluminum Ore Company and the Armour Meatpacking plant. However, he was displaced as mayor in 1903 and replaced by a series of corrupt administrations. He fought for good governance and even helped get a mayor indicted for corruption. After the 1917 massacre, civic leaders begged him to come back, even though he was then 72 years old. He served eight years and oversaw the payment of reparations to the victims of the massacre. He personally signed each bond for reparations."
},
{
"lat": 38.624121,
"lng": -90.153286,
"area": "Downtown / Olivette Park Sites (North of Broadway, south of I-64)",
"intersection": "St. Clair Avenue west of this point was called “Whiskey Chute,” for it was lined with taverns and brothels. On May 28, 1917, whites set fires and accosted African-American workers leaving the National Stock Yards, particularly on St. Clair Avenue between Second and Fourth Streets. Authorities were able to disperse the rioters, but the trouble was not over—it was just postponed for another day.",
"address": "North 9th Street and St. Clair Avenue",
"notes": "",
"description": "St. Clair Avenue west of this point was called “Whiskey Chute,” for it was lined with taverns and brothels to tempt young farmers with pockets full of cash who had just sold livestock at the stockyards. They had to go down this route to get to the train depot. It was employment strife at the National Stock Yards that helped set off the May 28 riot, and it was along Whiskey Chute that trouble showed up. Whites accosted African-American workers leaving the meatpacking plants and there were skirmishes, particularly on St. Clair Avenue between 2nd and 4th Streets. Police officers made some rescues and the prompt arrival of Illinois National Guard soldiers caused the rioters here to scatter. The trouble was not over—it was just postponed for another day."
},
{
"lat": 38.628924,
"lng": -90.147159,
"area": "Downtown / Olivette Park Sites (North of Broadway, south of I-64)",
"intersection": "",
"address": "621 North 9th Street",
"notes": "",
"description": "Mayor Fred Mollman lived at this site. Mollman was an incompetent politician who knew that the city was about to explode with violence but didn’t know what to do. He had been the leader of a corrupt government that was unprepared to respond to any civil disturbance, much less an open massacre in the streets. Marcus Garvey said in a speech that Molllman was the man to blame for the massacre, believing Mollman wanted African Americans out of the city. Mollman was indicted for malfeasance but the charges were later dropped."
},
{
"lat": 38.636941,
"lng": -90.132421,
"area": "Emerson Park Sites (North of I-64)",
"intersection": "North 9th and Gross Avenue, northwest corner",
"address": "North 9th Street and Gross Avenue",
"notes": "",
"description": "Around 11 p.m., near the end of the massacre but before major reinforcements of the Illinois National Guard arrived, rioters pushed to this area of the city and started setting homes on fire. The L&N rail yards were just north of this street and officials feared that the rail terminal would be burned as well."
},
{
"lat": 38.635326,
"lng": -90.129481,
"area": "Emerson Park Sites (North of I-64)",
"intersection": "North 13th and Nectar Avenue",
"address": "North 13th Street and Nectar Avenue",
"notes": "",
"description": "About fifteen houses were destroyed in this neighborhood, though it is more than two miles away from the core of the massacre. As firefighters would arrive to extinguish flames in one area, rioters would move to start fires in another. St. Louis firefighters were called to help about 9:00 p.m. As they made progress fighting fires in the downtown area, rioters had moved to this neighborhood about 11:00 p.m."
},
{
"lat": 38.626257,
"lng": -90.134063,
"area": "Emerson Park Sites (North of I-64)",
"intersection": "North 18th and Parsons Avenue, northeast corner",
"address": "North 18th Street and Parsons Avenue",
"notes": "",
"description": "Several homes were burned in this area, as rioters made one last push to destroy African-American homes as midnight approached. Fatalities were few here, as many African-Americans already were alerted to trouble by this time and fled the neighborhood."
}
];
// Latitude, longitude, Zoom Level
var map = L.map('map__riot').setView([38.6245, -90.1506], 14);
// TileLayer
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}.png', {
attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> — Map data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
minZoom: 10,
maxZoom: 16,
ext: 'png'
}).addTo(map);
// Iterate over the markers and add them to the map
for (var i = 0; i < sites.length; i++ ) {
marker = new L.marker([sites[i].lat, sites[i].lng])
.bindPopup('<p class="popup__header">'+ sites[i].address + '</p><p class="popup__description">' + sites[i].description + '</p>' )
.addTo(map);
}
console.log(sites);
console.log(sites[0].lat);
console.log(sites[0].lng);
<div id="map_interactive">
<div id="map__riot"></div>
<p class="map__attribution">Site histories provided by Andrew J. Theising, Ph.D. Several of these descriptions have been condensed online. </p>
</div>
#map__riot {
height: 600px;
}
#map__riot .popup__header,
#map__riot .popup__description {
font-family: 'Roboto', sans-serif;
font-size: 16px;
}
.map__attribution {
font-family: 'Roboto', sans-serif;
font-size: 12px;
}
#map__riot .popup__header {
font-weight: 700;
}
#map__riot .popup__description {
font-size: 14px;
line-height: 1.6;
}