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

Question

我有一堆坐标存储在 JSON 对象中，用作一些 google 地图标记的信息。我正在尝试设置一个“点击”事件监听器，它将使用来自 JSON 对象的数据，并且在我的 google 地图 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 您的 <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
  }
};

现在我们需要创建一个函数来删除 all 标记和一个函数来添加 single 标记。

前一个函数会遍历每个标记，并使用每个标记的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 获取当前值，根据 selected 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.
  });
}

希望这对您有所帮助。如果您有任何问题，请在下面的评论中告诉我。

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

How can I use my JSON data to create markers on a google maps API?

javascript

json

google-maps

event-listener

google-maps-markers