主页 / 问题 / 619483
Accepted
ilya1099
Asked:2020-01-26 03:05:42 +0000 UTC2020-01-26 03:05:42 +0000 UTC

当您在菜单中选择它们时，在 Google 地图中显示特定颜色的标签

  • 772

我试图通过选择菜单中的项目来显示该项目的标签，并删除所有其他标签，如果我删除该项目，则返回所有标签。编译了一个仅删除所选菜单图标的版本。帮助，谁了解如何使用 Google Maps API。

var map = {};

function initialize() {

  var mapProp = {
    center: {
      lat: -25.363,
      lng: 131.044
    },
    zoom: 8,
    markers: []
  };

  map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  var marker1 = new google.maps.Marker({
    position: {
      lat: -25.363,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker1);
  var marker2 = new google.maps.Marker({
    position: {
      lat: -25.664,
      lng: 131.044
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker2);
  var marker3 = new google.maps.Marker({
    position: {
      lat: -25.365,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker3);
  var marker4 = new google.maps.Marker({
    position: {
      lat: -25.366,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
    map: map,
    category: 'blue',
  });
  map.markers.push(marker4);
  var marker5 = new google.maps.Marker({
    position: {
      lat: -25.565,
      lng: 131.144
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
    map: map,
    category: 'red',
  });
  map.markers.push(marker5);
  var marker6 = new google.maps.Marker({
    position: {
      lat: -25.666,
      lng: 131.244
    },
    icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
    map: map,
    category: 'green',
  });
  map.markers.push(marker6);

}
google.maps.event.addDomListener(window, 'load', initialize);


$(document).ready(function() {
  $('.markerBtn').bind('click', function(el) {
    var catToToggle = $(this).attr('data-category');
    $.each(map.markers, function() {
      if (this['category'] == catToToggle) {
        this.setVisible(!this.getVisible());
      }
    });
  });
});

.islands#redIcon {color: red;}
#name {
text-decoration: none;
}
<div id="googleMap" style="width:500px;height:380px; "></div>
<div class="markerBtn" data-category="green">
  <a href="#" id="name" style="color: green;">1 пункт</a>
</div>
<div class="markerBtn" data-category="red">
  <a href="#" id="name" style="color: red;">2 пункт</a>
</div>
<div class="markerBtn" data-category="blue">
  <a href="#" id="name" style="color: blue;">3 пункт</a>
</div>

javascript

1 个回答

  1. Best Answer

    您的任务与GoogleMaps. 很干净javascript。

    首先，您需要存储每个菜单标签的“状态”（开/关）。
    其次，你应该注意里面的代码$.each(map.markers, function() {});。它会滚动所有可用的标记，您需要对其进行更改，以便在匹配时打开或关闭标记，如果不匹配则消失。

    功能getVisible()会setVisible()帮助你。
    第一个检查标记是否已启用（显示）。第二个打开或关闭它。

    这是您需要做的：
    首先，您需要为每个菜单项添加状态数据。像这样添加data-state="off"：

    <div class="markerBtn" data-state="off" data-category="red">

    所有标签最初都是禁用的。

    好吧，改变js本身：

    $(document).ready(function() {
  $('.markerBtn').bind('click', function(el) {
    var catToToggle = $(this).attr('data-category'); /* категория нажатой метка */
    var catState = $(this).attr('data-state'); /* статус нажатой метки */
    /* сразу меняем статус нажатой метки. Было on - делаем off, и наоборот */
    if (catState=='on') {
      $(this).attr('data-state', 'off');
    } else {
      $(this).attr('data-state', 'on');
    }
    /* теперь проверяем все маркеры подряд и прячем или показываем в зависимости от категории нажатой метки и ее состояния */
    $.each(map.markers, function() {
      if (this['category'] == catToToggle) {
        if (catState=='on') { /* проверяем состояние метки */
          /* включена - показываем маркер */
          this.setVisible(true);
        } else {
          this.setVisible(false);
        }
      } else {
        this.setVisible(false); /* это маркер другой категории - прячем */
      }
    });
  });
});

    直接插入代码的注释...

    注意：根据您拥有的 jQuery 版本，您.attr()很可能需要将.prop().

    • 1

相关问题