从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"></script> 
 
<input type="button" value="toggle" onclick="if(htmlMarker.getMap()!=null) {htmlMarker.setMap(null)}else{htmlMarker.setMap(gmap);}" /> 
 
<div id="map_canvas"></div>