如何使用我的 JSON 數據在谷歌地圖 API 上創建標記？

Question

我有一堆坐標存儲在 JSON object 中，用作一些谷歌地圖標記的信息。 我正在嘗試設置一個“點擊”事件監聽器，它將使用 JSON object 中的數據並在我的谷歌地圖 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
  }
};

現在我們需要創建一個 function 來刪除所有標記，並創建一個 function 來添加一個標記。

之前的function會循環遍歷每個marker，使用每個marker的setMap方法來斷開與map的連接。 循環后，它應該清除所有標記的數組。

后者 function 應采用具有{ lat: number, lng: number}結構的單個coordinates object 和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 function 中，創建您的 map，並開始監聽<select>元素上的change事件。 每當值發生變化時，從 select 獲取當前值，根據所選location選擇coordinates ，然后調用removeMarkers()和createMarkers(coordinates, map)以首先刪除所有標記，然后將新標記添加到 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.
  });
}

希望這可以幫助你。 如果您有任何問題，請在下面的評論中告訴我。