javascript - 使用 Google map 自定义叠加层创建自定义图标(使用 Raphael JS)

Question

我正在使用 Google Maps OverlayView 类创建自定义标记(使用 Raphael JS)，但在调用公共(public)方法时访问新子类的某些属性时遇到问题。

我在这里遵循了 Google 相当简单的示例 ~ https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays ~ 创建自定义标记类，包括其“隐藏”和“显示”方法。

function MapCustomMarker(opts){
this.pos_ = opts.position;
this.map_ = opts.map;
this.div_ = null;
this.color_ = (!opts.color ? '#e32636' : opts.color);
this.height_ = 32;
this.width_ = 32;
this.scale_ = 1.2;

this.icons_ = {
    pinpoint:'M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z',
    help: 'M12.558,15.254c2.362,0,4.277-1.916,4.277-4.279s-1.916-4.279-4.277-4.279c-2.363,0-4.28,1.916-4.28,4.279S10.194,15.254,12.558,15.254zM15.662,15.224c-0.875,0.641-1.941,1.031-3.103,1.031c-1.164,0-2.231-0.391-3.105-1.031c-0.75,0.625-1.498,1.519-2.111,2.623c-1.422,2.563-1.578,5.192-0.35,5.874c0.55,0.312,1.127,0.078,1.723-0.496c-0.105,0.582-0.166,1.213-0.166,1.873c0,2.938,1.139,5.312,2.543,5.312c0.846,0,1.265-0.865,1.466-2.188c0.201,1.311,0.62,2.188,1.462,2.188c1.396,0,2.544-2.375,2.544-5.312c0-0.66-0.062-1.291-0.167-1.873c0.598,0.574,1.174,0.812,1.725,0.496c1.228-0.682,1.069-3.311-0.353-5.874C17.159,16.742,16.412,15.849,15.662,15.224zM19.821,3.711l-1.414,1.414c1.499,1.499,2.428,3.569,2.428,5.851c0,2.283-0.929,4.353-2.428,5.853l1.413,1.412c1.861-1.86,3.015-4.43,3.015-7.265C22.835,8.142,21.683,5.572,19.821,3.711zM16.288,14.707l1.413,1.414c1.318-1.318,2.135-3.138,2.135-5.145c0-2.007-0.816-3.827-2.134-5.145l-1.414,1.414c0.956,0.956,1.547,2.275,1.547,3.731S17.243,13.751,16.288,14.707zM21.941,1.59l-1.413,1.414c2.042,2.042,3.307,4.862,3.307,7.971c0,3.11-1.265,5.93-3.308,7.972l1.413,1.414c2.405-2.404,3.895-5.725,3.895-9.386C25.835,7.315,24.346,3.995,21.941,1.59z'
}

this.popup_ = 'M16,5.333c-7.732,0-14,4.701-14,10.5c0,1.982,0.741,3.833,2.016,5.414L2,25.667l5.613-1.441c2.339,1.317,5.237,2.107,8.387,2.107c7.732,0,14-4.701,14-10.5C30,10.034,23.732,5.333,16,5.333z';

this.icon_ = this.icons_[opts.icon];
this.setMap(opts.map);
}

MapCustomMarker.prototype = new google.maps.OverlayView();

MapCustomMarker.prototype.onAdd = function() {
// Create the DIV and set some basic attributes.
var div = document.createElement('div');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
div.style.cursor = "pointer";
div.style.width = this.width_+"px";
div.style.height = this.height_+"px";

var paper = Raphael(div,this.height_, this.width_);
var el = paper.path(Raphael.transformPath(this.icon_, 's'+this.scale_)).attr({fill: this.color_, stroke: "#333333"});   

// Set the overlay's div_ property to this DIV
this.div_ = div;

// We add an overlay to a map via one of the map's panes.
// We'll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayMouseTarget.appendChild(div);
}
MapCustomMarker.prototype.draw = function() {

// Size and position the overlay. 
var overlayProjection = this.getProjection();

// We'll use these coordinates to position the DIV.
var o = overlayProjection.fromLatLngToDivPixel(this.pos_);  
var l = o.x - Math.round(this.width_ / 2);
var t = o.y - this.height_;

this.div_.style.left = l + 'px';
this.div_.style.top = t + 'px';
}
MapCustomMarker.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
}
MapCustomMarker.prototype.hide = function() {
  console.log(this.div_);
  console.log(this.color_);
  if (this.div_) {
   this.div_.style.visibility = "hidden";
  }
}

MapCustomMarker.prototype.show = function() {
  if (this.div_) {
    this.div_.style.visibility = "visible";
  }
}

MapCustomMarker.prototype.toggle = function() {
  if (this.div_) {
    if (this.div_.style.visibility == "hidden") {
      this.show();
    } else {
      this.hide();
    }
  }
}

这个类非常好地在我的 map 上使用拉斐尔图标创建标记。当我想隐藏或显示任何特定标记时，问题就出现了。

var marker = new MapCustomMarker({position: pos, map: self.map, icon:'help', color:'#e32636'});
marker.hide();

marker.hide() 不会隐藏标记。

您会注意到，在“隐藏”方法中，我有两个 console.log 命令测试 this.color_ 和 this.div_ 的值。 console.log(this.color_) 返回对象启动时设置的颜色。 console.log(this.div_) 返回 null，即使在创建标记时它在“onAdd”和“draw”方法中明显发生了更改。

我不确定这是否是对 javascript 中公共(public)和私有(private)属性的误解还是其他什么。我几乎完全使用了谷歌地图自定义叠加示例。

如果大家有什么想法，请留言。 (除了这一问题之外，我希望这段代码能够帮助其他想要将 Raphael JS 功能与 Google map 合并的人。)谢谢!

Answer 1

因此，在实例化对象时，似乎在“onAdd”和“draw”方法有机会更改 this.div_ 变量之前调用了marker.hide()。由于我希望所有标记在创建时都隐藏，因此我将添加

div.style.visibility = "hidden";

到 onAdd 方法，稍后将在加载所有标记后调用maker.show()。