javascript - 点击 Google map 标记时添加信息窗口气泡

Question

我想添加一个infoWindow，这样当我单击一个标记时，它会在一个漂亮的小窗口气泡中显示标题和说明。

使用我现有的代码，有人可以给我一些帮助来实现这一目标吗？

“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 map 3.8.1。

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

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

非常感谢您的帮助。

Answer 1

您需要创建一个可在渲染函数中使用的信息窗口实例。

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

您可能需要在初始化函数中创建它，就像创建 park_data 数组一样。

您需要设置信息窗口的内容(我们不知道您想要什么，但这里有一个示例)

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，所以我不确定你应该如何声明/检索你的变量，但这应该可以帮助你开始。

希望这有帮助!