如何将谷歌地图和基于骨干视图的信息框结合起来

How can I combine Google Maps and an Infobox based on a Backbone View

本文关键字：信息 结合 起来 视图 于骨干 谷歌地图      更新时间：2023-09-26

我想要一个谷歌地图，当点击标记时，它将打开一个实际上（或基于）Backbone View的信息框（或自定义覆盖）。主干视图应该在第一次打开时通过发出ajax调用来获取其内容，但如果关闭并重新打开，则不应再次调用服务器（应显示第一次打开的结果）

我根本不知道如何实现这一点，因为信息框的内容是一个dom元素（我只想在第一次打开它时更改/填充它）。（顺便说一句，我主要是一名后端开发人员，前端对我来说很新）

我想做的是类似的事情，但我不确定这是正确的做法：

var view = new MyOverlayBackboneView({ model: myModel});
var infoBoxOptions = {
   content: view.el
};

var infoBox = new InfoBox(infoBoxOptions);
var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(some_lat, some_lng),
    ...
    other marker related parameters
});
marker.infoBox = infoBox;
google.maps.event.addListener(marker, 'click', function() {
    this.infoBox.open(map, this);
}

我在这里缺少的是第一次打开信息框时Backbone View的render（）部分，也不知道在哪里执行。

不用说，我希望启动infobox的代码部分尽可能干净，并将任何样式和ajax调用留给主干视图。

如果有人能给我指明正确的方向（教程/示例代码），我将不胜感激。提前感谢您提供的任何帮助。

您的视图可能是这样的：

MyOverlayBackboneView = Backbone.View.extend({
  render: function() {
    [rendering the contents of your view here]
    return this;
  }
};

然后在创建信息框时：

var infoBoxOptions = {
  content: view.render().el
};

这将使视图只渲染一次，然后将渲染的内容放入InfoBox中。

相关文章：