iT邦幫忙

0

Google Map API 移除Marker

內容是一個選單
理想是在選擇選項時會先把全部marker移除
再顯示對應的marker
但卻沒有成功移除
點擊觸發時console沒有出現error
想請問是哪邊有問題

$(function() {
  $("#search").click(function() {
    $.ajax({
      method: "GET",
      url: "https://data.kaohsiung.gov.tw/Opendata/DownLoad.aspx?Type=2&CaseNo1=AV&CaseNo2=2&FileType=1&Lang=C&FolderType=",
      dataType: "json"
    })
      .done(function(data) {
        var markers = [];
        //執行移除函式
        deleteMarkers();
        $.each(data, function(i, e) {
          if($("#dist :selected").attr("data-i") == e.Zipcode) {
            var latLng = new google.maps.LatLng(e.Py, e.Px);
            var marker = new google.maps.Marker({
              position: latLng,
              map: map,
              title: e.Name
            });
            markers.push(marker);
          }
        });
        //移除的函式
        function deleteMarkers() {
          markers.forEach(function(e) {
            e.setMap(null);
          });
          markers = [];
        }
        //可先將此段移除讓center不會跑
        var site = $('select option:selected').val().split(',');
        map.setCenter(new google.maps.LatLng(site[0], site[1]));
        map.setZoom(13);
        //
      });
  });
});
var map;
function initMap() {
  map = new google.maps.Map(document.querySelector("#map"), {
    center: {lat: 22.7025199, lng:120.4126757},
    zoom: 10
  });
}

1 個回答

0
fysh711426
iT邦新手 3 級 ‧ 2017-11-23 08:37:14

不會跑 forEach 因為 markers 永遠都是空的。

var markers = [];
//執行移除函式
deleteMarkers();
...
function deleteMarkers() {
  markers.forEach(function(e) {
    e.setMap(null);
  });
  markers = [];
}
看更多先前的回應...收起先前的回應...
Abner iT邦新手 5 級 ‧ 2017-11-23 10:36:54 檢舉

可是我中間有

markers.push(marker);

應該不是空的
還是我哪裡搞錯了?

var markers = [];

將這行移到 click 外呢?

小魚 iT邦研究生 5 級 ‧ 2017-11-23 12:21:17 檢舉

請善用console.log

Abner iT邦新手 5 級 ‧ 2017-11-23 23:35:03 檢舉

TO fysh711426: 移到外面就解決了,之後想想就像你說的,因為點擊一次他就會先把markers清空了,導致e.setMap(null)沒有清除到東西, 謝謝
TO 小魚:我在本文有提到點擊時console並沒有顯示錯誤喔

/images/emoticon/emoticon42.gif

我要發表回答

立即登入回答