使用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自定義覆蓋圖創建自定義圖標

回答

相關問題