将 Google Maps 自定义叠加层与 Backbone Views 混合使用 [英] Mixing Google Maps custom overlays with Backbone Views

问题描述

TL;DR

PinView.prototype = _.extend(PinView.prototype, google.maps.OverlayView.prototype) 是让 Backbone View 从另一个类"继承的正确"方式吗?>

长篇阅读

我们正在使用 Backbone 重做我们的网站，并正在努力包括一些地图功能.

我有一个 Backbone 视图，可以处理将 <div> 放在浏览器窗口中的特定点上；为了让 Google 的 Map API 将它们放置在地理坐标上，这似乎是很自然的事情.

根据 Google API，为了生成您创建的自定义叠加层一个新对象并将该对象的原型设置为 google.maps.OverlayView 的新实例.然后在该对象之上实现三个函数，以便该对象响应:

onAdd

绘制

onRemove

其中 onAdd 负责生成 HTML，然后将其应用到 Map 之上.这随后调用 draw 根据您提供的 LatLng 对和边界正确定位元素.onRemove 在您想要删除图层时被调用.

所以我修改了我的视图以包含这三个方法(它们只调用渲染和取消渲染并绑定到我的集合).然后让魔法发生"我正在做:

PinView.prototype = _.extend(PinView.prototype, google.maps.OverlayView.prototype)

这看起来对吗?我可以发布它所基于的视图和模型的代码，但老实说，它们与此示例无关 - 代码有效，我可以放置通过以下方式生成的自定义 div地图上的主干模型、视图和控制器组件没有问题，我想我在问什么(也许这个问题更适合程序员.se，所以让我知道，我会移动它).

这似乎是使我的 PinView 同时成为主干视图和 Google Maps OverlayView 的最简单方法，但我对原型继承不是 100% 满意，以了解我是否在做错误"或在某处破坏某事在路上.

解决方案

好主意！我通常对天气持怀疑态度，当事情正常时你是否正确"，所以如果你没有遇到阻碍并且覆盖层出现并做了应该做的事情我会说你是.

不过要仔细检查一件事:

这不是(也不可能)是真正的"多重继承——这个概念在基于原型的语言中并不真正相关:一个方法的一个实现将不可避免地获胜"并覆盖另一个实现，在至少在使用 _.extend()

时

这意味着如果Backbone.View 和google.maps.OverlayView 中存在同名的成员或方法，则最后一个在您的 _.extend() 调用中，将接管.但是当我使用 Chrome 的开发人员工具检查它们时，我没有看到任何明显的此类冲突.

所以我的建议:继续使用这个，只是测试很多.有时间我很想看看这个技术的例子.

TL;DR

Is PinView.prototype = _.extend(PinView.prototype, google.maps.OverlayView.prototype) the "proper" way to have a Backbone View inherit from another "class"?

Long read

We're redoing our site using Backbone and are working on including some mapping functionality.

I've got a Backbone view that handles placing <div>s onto specific points within the browser window; this seems like a natural thing to extend in order have Google's Map API place them on geographical coordinates.

According to the Google API, in order to generate a custom overlay you create a new object and set the prototype for that object to a new instance of google.maps.OverlayView. You then implement three functions on top of that object so that the object responds to:

onAdd

draw

onRemove

Where onAdd is responsible for generating the HTML and then applying it on top of the Map. This subsequently calls draw which positions the element correctly according to the LatLng pairs and bounds you've provided. onRemove gets called when you want to get rid of your layer.

So I've modified my View to include these three methods (which just call render and unrender and are bound to my collection). And then to make "the magic happen" I'm doing:

PinView.prototype = _.extend(PinView.prototype, google.maps.OverlayView.prototype)

Does this look right? I can post the code for the View and the Model on which it's based, but honestly, they're irrelevant to this example -- the code works and I'm able to place custom divs generated through Backbone model, view and controller components on the map without a issue, what I'm asking I guess (and maybe this question is more apropos for programmers.se, so let me know and I'll move it).

This seems to be the easiest way to make my PinView both a Backbone View and a Google Maps OverlayView, but I'm not 100% comfortable with prototypal inheritance to know if I'm doing something "wrong" or breaking something somewhere down the road.

解决方案

Nice idea! I'm usually a bit sceptical about weather or not you're 'correct' when things work so if you haven't run into a showstopper and the overlays shows up and does what the're supposed to do I'd say you are.

One thing to check out closer, though:

This isn't (and can't) be "real" multiple inheritance - that concept isn't really relevant in a prototype based language: one implementation of a method will inevitable "win" and overwrite the other implementation, at least when using _.extend()

This means that if there are members or methods with the same names in Backbone.View and google.maps.OverlayView the one last in your _.extend() call will be the one that takes over. But when I inspect them using Chrome's Developer Tools I didn't see any obvious collision of this kind.

So my recommendation: continue using this, just test a lot. I'd love to see an example of this technique some time.

这篇关于将 Google Maps 自定义叠加层与 Backbone Views 混合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！