我如何使这个函数面向对象，这样我就可以向我的对象添加一个新位置，它就可以在我的函数中工作

Question

这是我的js:

var animalAgeValue;
var animalHabitatValue;
var latLong = {
Berlin: {lat:52.5159, lng:13.3777},
SanFrancisco: {lat:37.773972, lng:-122.431297},
Beijing: {lat:39.916668, lng:116.383331}
}

function goToPage(page) {
if(page == "p1") {
document.getElementById("p1").hidden = false
document.getElementById("map").hidden = true
document.getElementById("p2").hidden = true
document.getElementById("newAnimal").hidden = true
} else if(page == "p2") {
document.getElementById("p1").hidden = true
document.getElementById("map").hidden = false
document.getElementById("p2").hidden = false
document.getElementById("newAnimal").hidden = false
document.getElementById("animalNameD").innerHTML = animalNameValue;
document.getElementById("animalAgeD").innerHTML = animalAgeValue;
document.getElementById("animalHabitatD").innerHTML = animalHabitatValue
}


}

function submitted() {
animalNameValue = document.getElementById("animalName").value;
console.log(animalNameValue);
animalAgeValue = document.getElementById("animalAge").value;
console.log(animalAgeValue);
const habitats = document.querySelectorAll('input[name="habitat"]');
for (const habitat of habitats) {
if (habitat.checked) {
animalHabitatValue = habitat.value;
console.log(animalHabitatValue);
if(habitat.value == "Berlin") {
map.setCenter(latLong.Berlin);
map.setZoom(9)
} else if(habitat.value == "San-Francisco") {
map.setCenter(latLong.SanFrancisco);
map.setZoom(9)
} else if(habitat.value == "Beijing") {
map.setCenter(latLong.Beijing);
map.setZoom(9)
}
break;
}
}

goToPage("p2")

}
var submit = document.querySelector('#submit')
submit.onclick = function() {submitted()};

我想重新格式化我的submitted函数，这样，如果我在latLong对象中添加了一个新位置，并在HTML中添加了元素，并在网页中选择了它，它就会使我的地图以纬度和经度为中心。换句话说，我想从latLong对象向map.setCenter传递新的lat和long，而不必每次都添加额外的if函数。

Answer 1

您可以使用变量作为属性名称，通过括号语法访问对象属性。

map.setCenter(latLong[habitat.value]);