切换标记隐藏/显示标记点击

时间:2014-04-20 02:36:42

标签: javascript google-maps google-maps-api-3

我做了无数次搜索,导致如何隐藏点击的标记。我想要做的是当你点击一个标记。它周围的标记会隐藏,直到所选标记的信息框关闭。然后其他标记再次可见。目前我唯一能做到的就是删除一个标记,点击它我不是我想要的。就像我说的那样。我做了无数次搜索,但是当点击标记时找到隐藏其他标记的方法,然后在点击标记的信息框关闭时取消隐藏它们。有什么建议?

目前我所拥有的是隐藏所选标记的东西,这不是我想要的。

      function initialize() {
   var locations = [
      ['Siren 1', 32.832, -96.629, 1],
      ['Siren 2', 32.827, -96.644, 2],
      ['Siren 3', 32.824, -96.612, 3],
      ['Siren 4', 32.809, -96.658, 4],
      ['Siren 5', 32.805, -96.634, 5],
      ['Siren 6', 32.809, -96.614, 6],
      ['Siren 7', 32.792, -96.656, 7],
      ['Siren 8', 32.785, -96.637, 8],
      ['Siren 9',  32.794, -96.613, 9],
      ['Siren 10', 32.776, -96.61, 10],
      ['Siren 11', 32.761, -96.633, 11],
      ['Siren 12', 32.764, -96.598, 12],
      ['Siren 13', 32.773, -96.581, 13],
      ['Siren 14', 32.748, -96.614, 14],
      ['Siren 15', 32.74, -96.592, 15],
      ['Siren 16', 32.751, -96.576, 16],
      ['Siren 17', 32.75,  -96.55, 17],
      ['Siren 18', 0, -0, 18],
      ['Siren 19', 32.728, -96.583, 19],
      ['Siren 20', 32.741, -96.566, 20],
      ['Siren 21', 32.738, -96.545, 21],
      ['Siren 22', 32.722, -96.537, 22],
      ['Siren 23', 32.708, -96.558, 23],
      ['Siren 24', 32.696, -96.499, 24],
      ['Siren 25', 32.694, -96.564, 25]
    ];

    var mapOptions = {
          center: new google.maps.LatLng(32.764980445475885, -96.60024896289065),

          panControl: false,
          zoom: 12,
          mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.RIGHT_TOP
    },
          mapTypeId: google.maps.MapTypeId.HYBRID
        };

        var map = new google.maps.Map(document.getElementById("map"),
    mapOptions);

    function MyLogoControl(controlDiv) {
    controlDiv.style.padding = '5px';
    var logo = document.createElement('IMG');
    logo.src = 'images/watermark_MW_GMap.png';
    logo.style.cursor = 'pointer';
    controlDiv.appendChild(logo);

    google.maps.event.addDomListener(logo, 'click', function() {
        window.location = 'http://www.mesquiteweather.net';
    });
  }

   var logoControlDiv = document.createElement('DIV');
   var logoControl = new MyLogoControl(logoControlDiv);
   logoControlDiv.index = 0; // used for ordering
   map.controls[google.maps.ControlPosition.TOP_LEFT].push(logoControlDiv);

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    var image = 'http://maps.google.com/intl/en_us/mapfiles/ms/micons/green.png';

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: image,
        draggable: true
      });

      var openCircle;

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
          marker.setMap(null);

          if (openCircle !== undefined) {
            openCircle.setMap(null);
          }

          openCircle = new google.maps.Circle({
            map: map,
            radius: 4828,    // metres
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
          });

          openCircle.bindTo('center', marker, 'position');

          google.maps.event.addListener(infowindow,'closeclick',function(){
            openCircle.setMap(null);
          });
        }
      })(marker, i));

    }
}

0 个答案:

没有答案