根据单选按钮值调用标记

Posted 2021-04-14

我试图根据值（年份为字符串）将标记调用到谷歌地图。我想通过点击一下点击事件来监听点击无线电课程时，我可以初始化$.getJSON并设置年份的值。

如何在单击单选按钮时初始化$.getJSON调用并将变量yearValue置于哪个单选按钮上？

此外，如果我想在每次单击一个新的单选按钮时重置标记，我是否需要将所有标记放在一个数组中，将它们设置为地图，然后在检查新的单选按钮值时清除该数组（说我选择2014而不是2015？）。如何在选中新的单选按钮时清除标记，以便我不会同时看到这两个年份？

var map;
var mapProp;
var url = 'https://data.montgomerycountymd.gov/resource/5pue-gfbe.json?$limit=50000';
var count;
var marker;
var manyCategory = [];
var category = [];
var yearValue;

function initMap() {
  mapProp = {
    center: new google.maps.LatLng(39.154743, -77.240515),
    zoom: 10
  };
  map = new google.maps.Map(document.getElementById('map'), mapProp);
}

function addInfoWindow(marker, message) {
  var infoWindow = new google.maps.InfoWindow({
    content: message
  });
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.open(map, marker);
  });
}

$(document).ready(function() {
  if ($('input:radio[name="year"]').is("checked")) {
    yearValue = $(this).val();
  }

  initMap();
  $('.radioClass').on('click', function() {
    $.getJSON(url, function(data) {
      count = 0;
      for (var i = 0; i < data.length; i++) {
        var newDate = data[i].inspectiondate;
        if (data[i].violation22 === "Out of Compliance" && newDate.slice(0, 4) === yearValue) {
          if (data[i].hasOwnProperty('latitude')) {
            count++;

            var message = "<div>" + data[i].organization + "<br>" + (data[i].inspectiondate).slice(0, 10) + "</div>";
            var uniqueIcon;
            if (data[i].category === "Private School" || data[i].category === "Public School- Elementary" || data[i].category === "Public School- High" || data[i].category === "Public School- Middle") {
              uniqueIcon = "https://maps.gstatic.com/mapfiles/ms2/micons/blue.png";
            } else if (data[i].category === "Market" || data[i].category === "Carry Out" || data[i].category === "Snack Bar" || data[i].category === "Caterer" || data[i].category === "Restaurant") {
              uniqueIcon = "https://maps.gstatic.com/mapfiles/ms2/micons/purple.png"
            } else if (data[i].category === "Nursing Home" || data[i].category === "Hospital" || data[i].category === "Assisted Living") {
              uniqueIcon = "https://maps.gstatic.com/mapfiles/ms2/micons/red.png"
            } else {
              uniqueIcon = "https://maps.gstatic.com/mapfiles/ms2/micons/yellow.png";
            }

            marker = new google.maps.Marker({
              position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
              title: "Hello, world. I received a food violation in 2015",
              animation: google.maps.Animation.DROP,
              icon: uniqueIcon,
            });
            marker.setMap(map);
            //console.log(data[i].inspectionresults);
            addInfoWindow(marker, message);
            manyCategory.push(data[i].category);
          }
        }
      }
      //;
      $.each(manyCategory, function(i, el) {
          if ($.inArray(el, category) === -1) category.push(el);
        })
        //console.log(count);
        //console.log(manyCategory);
        //console.log(category);
    });
  });
});

h1,
#icons,
#radioDiv {
  text-align: center;
}
#map {
  margin: 0 auto;
  width: 700px;
  height: 400px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Rodent Violations</h1>
<div id="radioDiv">
  <input type="radio" name="year" value="2015" class="radioClass">2015
  <input type="radio" name="year" value="2014" class="radioClass">2014
</div>
<div id="icons">
  <img src="https://maps.gstatic.com/mapfiles/ms2/micons/blue.png">School
  <img src="https://maps.gstatic.com/mapfiles/ms2/micons/purple.png">Restaurant
  <img src="https://maps.gstatic.com/mapfiles/ms2/micons/red.png">Healthcare
  <img src="https://maps.gstatic.com/mapfiles/ms2/micons/yellow.png">All other
</div>
<div id="map"></div>

答案

您需要一个全局可见的标记数组，其中包含您创建的所有标记，以便在显示新标记之前清除它们。

var myMarkers 

添加回调函数的开头清除标记设置映射为null

$.getJSON(url, function(data) {
    count = 0;
    for (var i = 0; i < myMarkers.length; i++) {
       myMarkers[i].setMap(null);
    }
    myMarkers = []; // empty the array 
   .......

使用您创建的所有标记填充myMArkers数组

marker.setMap(map);
addInfoWindow(marker, message);
myMarkers.push(marker);