从Google地图中删除HTML标记

Question

我使用goole map overlay将HTML添加为标记，但我不知道如何使用HTMLMarker.prototype.onRemove方法删除添加的所有标记。

遵循此代码http://jsfiddle.net/BCr2B/

$(".ps").css("opacity", "0");
var showStuff = function() {
  $("#div").click(function() {
    $("#phi").animate({
      opacity: "1"
    }, 300, function() {
      $("#pname").animate({
        opacity: "1"
      }, 300);
    });
  });
}

任何人都可以帮助我吗？

Answer 1

您需要从DOM中删除div元素：

HTMLMarker.prototype.onRemove = function () {
  div.parentNode.removeChild(div);
}

working fiddle

代码段

＆＃13;

＆＃13;

var overlay;
var htmlMarker;
var gmap;

function initialize() {
  var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
  var mapOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  htmlMarker = new HTMLMarker(62.323907, -150.109291);
  htmlMarker.setMap(gmap);
}
google.maps.event.addDomListener(window, 'load', initialize);

function HTMLMarker(lat, lng) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
}

HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
  div.parentNode.removeChild(div);
}

//init your html element here
HTMLMarker.prototype.onAdd = function() {
  div = document.createElement('DIV');
  div.className = "htmlMarker";
  div.innerHTML = "<i>HTML Marker</i>";
  var panes = this.getPanes();
  panes.overlayImage.appendChild(div);
}

HTMLMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  var panes = this.getPanes();
  panes.overlayImage.style.left = position.x + 'px';
  panes.overlayImage.style.top = position.y - 30 + 'px';
}

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="toggle" onclick="if(htmlMarker.getMap()!=null) {htmlMarker.setMap(null)}else{htmlMarker.setMap(gmap);}" />
<div id="map_canvas"></div>

＆＃13;

＆＃13;

＆＃13;