我试图将我所在地区的节目页面限制为仅显示与正在显示的地区相匹配的位置。因此,如果伊利诺伊州是存在的页面,那么只有伊利诺伊州的城市应该存在,而不是其他任何东西。
我所在地区的节目页面包含以下内容:
<div class="container-fluid>
<div class="row">
<div class="banner" id="region-banner>
</div>
<div class="location-container container">
<h3><%= @region.name %> </h3>
</div>
</div>
</div>
<script>document.addEventListener('DOMContentLoaded', app.regions);</script>
然后在我的region.js中使用region-banner来提取以下内容:
app.regions = () => {
function init() {
startGoogleMap();
let tabs = document.querySelectorAll("a.tab");
for (let tab of tabs) {
tab.addEventListener("click", tabClicked);
}
document
.querySelector("#region-select_")
.addEventListener("change", selectClicked);
}
let startGoogleMap = () => {
let map = new google.maps.Map(document.getElementById("region-banner"), {
zoom: 7,
// The latitude and longitude to center the map (always required)
disableDefaultUI: true,
gestureHandling: "cooperative",
styles: mapStyle
});
const chicago = new google.maps.Marker({
position: new google.maps.LatLng(39.900705, -86.061112),
map: map,
region: "Illinois",
icon: "/marker.png",
title: "Chicago"
});
const baltimore = new google.maps.Marker({
position: new google.maps.LatLng(39.332629, -76.746407),
map: map,
region: "Maryland"
icon: "/marker.png",
title: "Baltimore"
});
let bounds = new google.maps.LatLngBounds();
bounds.extend(cedar.position);
bounds.extend(baltimore.position);
map.fitBounds(bounds);
};
return init();
};
那么如何根据读取区域和匹配@ region.name?
来限制页面