簡體   English   中英

使用Google Maps自定義疊加層創建自定義圖標(使用Raphael JS)

[英]Using Google Maps custom overlays to create custom icons (with Raphael JS)

我正在使用Google Maps OverlayView類創建自定義標記(使用Raphael JS),並且在調用公共方法時訪問新的子類的某些屬性時遇到問題。

我在這里遵循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();
    }
  }
}

此類非常好地用Raphael圖標在我的地圖上創建了標記。 當我想隱藏或顯示任何特定標記時,問題就來了。

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或其他內容中的公共和私有屬性的誤解。 我幾乎完全使用了Google Maps自定義疊加層示例。

如果有人有任何想法,請將其傳遞。 (除了這一期,我希望這段代碼能對希望將Raphael JS功能與Google Maps合並的其他人有所幫助。)謝謝!

因此,似乎在實例化對象時,在方法“ onAdd”和“ draw”有機會更改this.div_變量之前就調用了marker.hide()。 由於我希望所有標記在創建時都被隱藏,因此我將添加

div.style.visibility = "hidden";

到onAdd方法,並在所有標記加載完畢后稍后再調用maker.show()。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM