javascript - 谷歌地图 API : Remove and reset markers on mouseover

Question

我想在初始化时设置所有标记 页面以及鼠标离开 div 时。当鼠标位于其中一个div上时，与该div相关的Marker会保留，其他的Marker会被移除，直到鼠标离开。

因此，我尝试使用 setMapOnAll(null) 删除所有标记，并在鼠标悬停时添加特定于 div 的标记，然后重置 mouseleave 上的所有标记。

但我无法让标记消失。

Javascript:

  <script>
    var infoWindow = new google.maps.InfoWindow();

    function initialize() {
      var map = new google.maps.Map(
        document.getElementById("map"), {
          center: new google.maps.LatLng(37.4419, -122.1419),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
      var name = "name1";
      var address = "address 1";
      var condition = "true";
      var point = new google.maps.LatLng(42, -72);
      var html = "<b>" + name + "</b> <br/>" + address;

      var i = 0;
      createMarker(point, condition,html, i, map);

      point = new google.maps.LatLng(42.02, -72.02);
      name = "name2";
      address = "address 2";
      html = "<b>" + name + "</b> <br/>" + address;
      condition = "false";
      i++;
      var marker = createMarker(point, condition, html, i, map);

      map.setCenter(marker.getPosition());
    }

    function createMarker(point, condition, html, i, map) {
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        draggable: true

      });
      var activeIcon, idleIcon;
      if (condition == "true") {
        idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
      } else {
        idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
      }
      marker.setIcon(idleIcon);

      var elem = document.getElementById('a' + i);
      if (!!elem) {
        elem.onmouseover = function() {
          setMapOnAll(marker, null);
          marker.setIcon(idleIcon);

        }
        elem.onmouseleave = function() {
          setMapOnAll(marker, map);

        }
      }
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);

      });

      return marker;
    }

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);

      });

    function setMapOnAll(marker, map) {
      for (var i = 0; i < marker.length; i++) {
        marker[i].setMap(map);
      }
    }
    }
    google.maps.event.addDomListener(window, "load", initialize);

  </script>

html:

   <div id="a0">marker 1</div>
   <div id="a1">marker 2</div>
   <div id="map"></div> 

CSS:

    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }

Answer 1

只需更改 that question 中的示例即可在外部 div 的鼠标悬停时设置标记的 map 属性，并在 mouseleave 时将其设置回 null。

代码片段:

function createMarker(point, icon, html, i, map) {
  var marker = new google.maps.Marker({
    position: point,
    draggable: true

  });
  marker.setIcon(icon);

  var elem = document.getElementById('a' + i);
  if (!!elem) {
    elem.onmouseover = function() {
      marker.setMap(map);
    }
    elem.onmouseleave = function() {
      marker.setMap(null);
    }
    document.getElementById('a' + i).onclick = (function(marker) {
      return function() {
        google.maps.event.trigger(marker, 'click');
      }
    })(marker);
  }
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);

  });
  markers.push(marker);
  return marker;
}


var infoWindow = new google.maps.InfoWindow();
var markers = [];
var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var name = "name1";
  var address = "address 1";
  var point = new google.maps.LatLng(42, -72);
  var html = "<b>" + name + "</b> <br/>" + address;
  var i = 0;
  createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_blue.png', html, i, map);

  point = new google.maps.LatLng(42.02, -72.02);
  name = "name2";
  address = "address 2";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_green.png', html, i, map);

  point = new google.maps.LatLng(42.01, -72.01);
  name = "name3";
  address = "address 3";
  html = "<b>" + name + "</b> <br/>" + address;
  i++;
  var marker = createMarker(point, 'http://labs.google.com/ridefinder/images/mm_20_red.png', html, i, map);
  map.setCenter(marker.getPosition());
}

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

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="a0">marker 1</div>
<div id="a1">marker 2</div>
<div id="a2">marker 3</div>
<div id="map_canvas"></div>