Question

您好我正在尝试使用Knockout脚本绑定Google地图。几乎一切都有效，但我不能强迫信息窗口出现在事件上。如果没有Knockout，我的代码可以正常工作，但事实却没有。在我的js代码下面：

var infowindow;
function point(name, lat, long) {
    this.name = name;
    this.lat = ko.observable(lat);
    this.long = ko.observable(long);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        title: name,
        map: map,
        draggable: true
    });
//if you need the poition while dragging
google.maps.event.addListener(marker, 'drag', function () {
    var pos = marker.getPosition();
    this.lat(pos.lat());
    this.long(pos.lng());
}.bind(this));

//if you just need to update it when the user is done dragging
google.maps.event.addListener(marker, 'dragend', function () {
    var pos = marker.getPosition();
    this.lat(pos.lat());
    this.long(pos.lng());
}.bind(this));
google.maps.event.addListener(marker, 'mouseover', function () {
    infowindow = new google.maps.InfoWindow({ content: "empty" });
    console.log("mouseover");
    infowindow.setContent(this.title);
    infowindow.open(map, this);

}.bind(this));


}

var map = new google.maps.Map(document.getElementById('googleMap'), {
    zoom: 5,
    center: new google.maps.LatLng(55, 11),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

var viewModel = {
    points: ko.observableArray([
        new point('Test1', 55, 11),
        new point('Test2', 56, 12),
        new point('Test3', 57, 13)])

};
function addPoint() {
    viewModel.points.push(new point('a', 58, 14));
}
ko.applyBindings(viewModel);

现在我的问题：

使它成功的简单方法。如果有，任何人都可以建议我在哪里寻找它？

Answer 1

可以使用this。

添加var self = this;作为点函数中的第一行＆amp;使用self来引用点内的属性。

在mouseover事件中，这是指标记，地图还是视图模型？如果拖动事件正确设置值，那么这就是点视图模型，在这种情况下，在mouseover事件中调用了this.title。没有标题......

function point(name, lat, long) {
    var self = this;
    self.name = name;
    self.lat = ko.observable(lat);
    self.long = ko.observable(long);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, long),
        title: name,
        map: map,
       draggable: true
    });
    //if you need the poition while dragging
    google.maps.event.addListener(marker, 'drag', function () {
        var pos = marker.getPosition();
        self.lat(pos.lat());
        self.long(pos.lng());
    }.bind(this));

    //if you just need to update it when the user is done dragging
    google.maps.event.addListener(marker, 'dragend', function () {
        var pos = marker.getPosition();
        self.lat(pos.lat());
        self.long(pos.lng());
    }.bind(this));
    google.maps.event.addListener(marker, 'mouseover', function () {
        infowindow = new google.maps.InfoWindow({ content: "empty" });
        console.log("mouseover");
        infowindow.setContent(marker.title);
        infowindow.open(map, this);
    }.bind(this));
}

Answer 2

我自己从未使用过淘汰赛，但将其与地图集成并不简单，这里有一些阅读材料：http://www.codeproject.com/Articles/351298/KnockoutJS-and-Google-Maps-binding http://www.codeproject.com/Articles/387626/BikeInCity-2-KnockoutJS-JQuery-Google-Maps Google maps and knockoutjs

您提供的地图代码看起来是正确的，所以我认为问题在于淘汰赛整合。

InfoWindow没有出现

2 个答案: