从Google Map删除HTML标记

问题描述

我正在使用goole贴图叠加层将HTML添加为标记，但是我不知道如何使用HTMLMarker.prototype.onRemove方法来删除所有添加的标记.

I'm using goole maps overlay to add HTML as markers but i don't know how to use HTMLMarker.prototype.onRemove method to remove all markers added.

遵循以下代码 http://jsfiddle.net/BCr2​​B/

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

有人可以帮助我吗?

推荐答案

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

You need to remove the div element from the DOM:

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

工作小提琴

代码段:

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>

这篇关于从Google Map删除HTML标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！