使用Google Maps自定义覆盖图创建自定义图标

我正在使用Google Maps OverlayView类创建自定义标记（使用Raphael JS），并且在调用公共方法时访问我的新子类的某些属性时遇到问题。使用Google Maps自定义覆盖图创建自定义图标

我遵循了Google的相当简单的示例〜https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays〜来创建一个自定义标记类，包括其'hide'和'show'方法。

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

这个类在我的地图上用Raphael图标创建标记非常好。问题出现在我想隐藏或显示任何特定标记时。

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

marker.hide（）不隐藏标记。

您会注意到在“hide”方法中，我有两个console.log命令测试this.color_和this.div_的值。 console.log（this.color_）返回对象启动时的颜色集。 console.log（this.div_）返回null，即使在创建标记时'onAdd'和'draw'方法明显改变了它。

我不确定这是对javascript还是别的什么公共和私有属性的误解。我几乎完全使用Google地图自定义覆盖范例。

如果有人有任何想法，请通过他们。（除了这一个问题，我希望这段代码能够帮助其他想要将Raphael JS功能与Google Maps合并的人。）谢谢！

来源

2013-04-21 user1383418

因此，在方法'onAdd'和'draw'有机会在对象实例化时更改this.div_变量之前，似乎会调用marker.hide（）。因为我希望所有标志物被创建时就被隐藏，我只是要

div.style.visibility = "hidden";

添加到使用onAdd方法，并调用maker.show（）后，所有的标志都已经好后加载。

来源

2013-04-21 20:07:39 user1383418

使用Google Maps自定义覆盖图创建自定义图标

回答

相关问题