使用Google地图自定义覆盖来创建自定义图标(使用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 ~来创建一个自定义标记类,包括它的'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();
}
}
}
这个类在我的地图上用拉斐尔图标很好地创建标记。当我想隐藏或显示任何特定的标记时,问题就出现了。
var marker = new MapCustomMarker({position: pos, map: self.map, icon:'help', color:'#e32636'});
marker.hide();
marker.hide()不隐藏标记。
您会注意到在"hide"方法中,我有两个console.log命令测试这个值。Color_和this.div_。Console.log (this.color_)返回对象初始化时的颜色集。console.log(this.div_)返回null,即使它在创建标记时在'onAdd'和'draw'方法中被明显改变。
我不确定这是否是在javascript或其他东西的公共和私有属性的误解。我几乎完全使用了谷歌地图自定义覆盖的例子。
如果有人有任何想法,请传递给大家。(除了这个问题之外,我希望这段代码能够帮助那些想要将Raphael JS功能与Google Maps合并的人。)谢谢!
所以看起来marker.hide()在方法'onAdd'和'draw'有机会改变this之前被调用。对象实例化时的Div_变量。因为我希望所有的标记在创建时都是隐藏的,所以我只需要添加
div.style.visibility = "hidden";
添加到onAdd方法,然后在加载了所有标记之后调用maker.show()。
- vaadin:使用自定义布局集成angular js
- 如何使用自定义标头跨域执行AJAX POST
- 如何使用自定义辅助对象(handler)实现嵌套的每个循环
- 使用自定义css在页面中弹出,而不覆盖页面's css
- LinkedIn共享链接图片未使用自定义url更新
- 使用自定义数据属性或将数据绑定到处理程序来处理事件
- 使用自定义记号创建可缩放的Y轴
- Select2-使用自定义模板时不显示占位符
- 如何在推特中使用自定义的bit.ly URL,而不是t.co
- 不使用自定义CSS或HTML(使用框架方法)的角度材质文本输入或文本区域标签大小
- 使用自定义选项从控制台运行JSlint
- $.width()在使用自定义字体时返回不同的结果
- Worklight Client使用自定义BODY参数调用过程
- target=“_空白“;使用自定义javascript生成的html页面
- AngularJS中货币过滤器的Javascript代码无法使用自定义符号
- 如何使用自定义功能覆盖时间轴对象.js时间轴对象的_repaintMinorText
- 使用自定义 SMTP 通过 JavaScript 发送电子邮件
- 剑道网格不允许我在使用自定义列模板时过滤列
- 是否可以在 Polymer 中的
节点上使用自定义属性以获得漂亮的 API - 通过 ajax 使用自定义滚动条向元素添加内容