Question

我想添加一个 infoWindow ，所以当我点击一个标记时，它会显示标题＆amp;在一个漂亮的小窗口泡沫中的描述。

使用我现有的代码，有人可以给我一些帮助，告诉我如何实现这个目标吗？

'park_data'是一个我正在存储标题，经度和数字的数组。纬度和经度描述城市中的每个公园。

的Javascript

    // controls the display of the park (the result)
    var ParkView = Backbone.View.extend({
    tagName: "article",
    className: "park-container",
    template: $("#parkTemplate").html(),

    render: function () {

        console.log(window.map)
        var marker = new google.maps.Marker({
          map: window.map,
          position: new google.maps.LatLng(this.model.get("lat"), this.model.get("lng")),
          title: this.model.get("title"),
          icon: window.park_icon
        });

        if(this.model.collection.length == 1){
          window.map.setCenter(new google.maps.LatLng(this.model.get("lat"), this.model.get("lng")))
        } else {

            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng() );
            bounds.extend(latlng);

        }

        console.log("map - here!")

        var tmpl = _.template(this.template);
        //console.log(this.model)
        this.$el.html(tmpl(this.model.toJSON()));
        return this;
    }
});


var MapView = Backbone.View.extend({

    initialize: function () {
        this.collection = new ParkCollection(park_data); //// array is generated in a separate file
        this.render();

    },

    render: function () {

    }
});

我正在使用 Google Maps 3.8.1 。

我的数组'park_data'是用PHP动态生成的，看起来有点像这样：

var park_data = [{"title":"Central Park", "lat":"55.8546658", "lng":"-4.241034300000024", "desc":"Description goes here"}]

非常感谢您的帮助。

Answer 1

您需要创建一个可以在渲染函数中使用的infowindow实例。

var infowindow = new google.maps.InfoWindow();

您可能需要在创建park_data数组的同时在初始化函数中创建它。

你需要设置infowindow的内容（我们不知道你想要什么，但这里有一个例子）

var marker = new google.maps.Marker({
    map: window.map,
    position: new google.maps.LatLng(this.model.get("lat"), this.model.get("lng")),
    title: this.model.get("title"),
    icon: window.park_icon
});

// Access the infowindow that you created in step 1 and set its content
// That might be something like that:

this.model.infowindow.setContent('Hello World!');

您需要在标记上使用事件监听器才能在点击时打开信息窗口（将此代码放在上面的代码之后）：

google.maps.event.addListener(marker, 'click', function () {

    this.model.infowindow.open(map, marker);
});

正如我所说，我不知道backbone.js所以我不确定你应该如何声明/检索你的变量，但这应该可以帮助你开始。

希望这有帮助！

单击Google地图标记时添加infoWindow气泡

1 个答案: