如何使用JSON数据在google地图API上创建标记

Question

我在JSON对象中存储了一组坐标，用作一些谷歌地图标记的信息。我正试图建立一个"；点击"；eventListener，它将使用JSON对象和在我的谷歌地图API中创建一个标记，但我不知道如何将其连接在一起。

这是我正在使用的代码。

<select name = "Landmarks and Attractions" id = mySelect onchange="myFunction()">
<option id="selected" value = "bigBenCoords">Big Ben</option>

var myCoordinates = {
"bigBenCoords" : {"lat":51.5007, "lng":-0.1246}}

function myFunction(){
var x = document.getElementById("mySelect").value;
console.log(myCoordinates[x]);
return myCoordinates[x];
};
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 51.509865,
lng:  -0.118092
}
});
var markerValue = myFunction();
console.log("marker value is", markerValue);
new google.maps.Marker({
position: myCoordinates["bigBenCoords"],
map
});
}

Answer 1

首先我建议不要使用onchange内联属性。这是一项古老的技术，并不像元素的addEventListener()方法那样灵活。

<select name="Landmarks and Attractions" id="location-select">
<option value="bigBenCoords">Big Ben</option>
<option value="statueOfLiberty">Statue Of Liberty</option>
</select>

您要做的第一件事是选择<select>元素并为标记创建一个数组。在添加标记之前，您需要删除以前的所有标记。要做到这一点，我们需要存储对标记的引用
创建一个名为markers的数组，在创建标记时可以在其中存储标记。

const locationSelect = document.getElementById('location-select');
const markers = [];
const myCoordinates = { 
"bigBenCoords" : {
"lat": 51.5007, 
"lng": -0.1246
},
"statueOfLiberty": {
"lat": 40.684155,
"lng": -74.0594181
}
};

现在，我们需要创建一个函数来删除所有标记，并创建一个添加单个标志的函数。

前一个函数将在每个标记上循环，并使用每个标记的setMap方法来断开与映射的连接。循环之后，它应该清除所有标记的数组。

后一个函数应该采用具有{ lat: number, lng: number}结构的单个coordinates对象和将标记添加到的map

function removeMarkers() {
markers.forEach(marker => {
marker.setMap(null); // Disconnect each marker.
});
markers.length = 0; // This empties the array.
}
function createMarker(coordinates, map) {
const marker = new google.maps.Marker({
position: coordinates,
map
});
markers.push(marker); // Add the marker to the array to save the reference.
}

现在，在initMap函数中，创建映射，并开始侦听<select>元素上的change事件。每当值发生变化时，从select中获取当前值，根据选定的location选择coordinates，然后调用removeMarkers()和createMarkers(coordinates, map)，首先删除所有标记，然后将新标记添加到地图中。

function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 12,
center: {
lat: 51.509865,
lng:  -0.118092
}
});
locationSelect.addEventListener('change', () => {
const location = locationSelect.value;
const coordinates = myCoordinates[location];
removeMarkers(); // First remove all markers.
createMarker(coordinates, map); // Then add the marker.
});
}

希望这能帮到你。如果你有任何问题，请在下面的评论中告诉我。