从 Google 地图中删除 HTML 个标记

Question

我正在使用 goole 地图覆盖将 HTML 添加为标记，但我不知道如何使用 HTMLMarker.prototype.onRemove 方法删除所有添加的标记。

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

var overlay;

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

var gmap = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

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(){}

//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';
}

var htmlMarker = new HTMLMarker(62.323907, -150.109291);
htmlMarker.setMap(gmap);
}

有人能帮帮我吗？

Answer 1

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

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

working fiddle

代码片段：

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';
}

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

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