信息窗口显示在错误的位置答案

【问题标题】：InfoWindow showing in wrong place信息窗口显示在错误的位置
【发布时间】：2014-07-22 20:24:55
【问题描述】：

我的网页没有什么问题。当我试图在标记上显示 InfoWindow 时。该窗口显示在地图的左上角而不是标记上。就像在下面的屏幕中一样：

这是我用于放置标记和使用 InfoWindows 的脚本。

var infowindow;
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();
    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(marker.title);
    infowindow.setContent(marker.name);
    infowindow.open(map, marker);

}.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);

全部在 jsfiddle 上：http://jsfiddle.net/24q8n/

【问题讨论】：

你应该提供你的整个代码，如果可能的话，一个 jsFiddle。
已添加！ -> jsfiddle.net/24q8n
marker.name 不存在。您正在尝试使用setContent 添加它。这会产生错误并将您的信息窗口放在错误的位置。使用marker.title 或不是undefined 的东西。
你想在你的拖动和拖动监听器中做什么？我不明白。
这些片段用于简单了解 Knockout.js。我忘了删除它们；）

标签： javascript google-maps-api-3

【解决方案1】：

您正在使用marker.name，即undefined。因此，您将 undefined 分配给 setContent 显然会阻止 infoWindow 工作并最终出现在左上角。删除infowindow.setContent(marker.name) 或将其替换为具有marker.title 之类的值的内容。或者在定义var marker = ...时定义marker.name：

var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, long),
    title: name,
    name: name, // define the name so setContent(marker.name) will work.
    map: map,
    draggable: true
});

或删除产生问题的行：

google.maps.event.addListener(marker, 'mouseover', function () {
    infowindow = new google.maps.InfoWindow({ content: "empty" });
    console.log(marker.title);
    // This line gives you the problem because marker.name is undefined.
    // infowindow.setContent(marker.name);
    infowindow.open(map, marker);    
}.bind(this));

【讨论】：

【解决方案2】：

http://jsfiddle.net/upsidown/24q8n/1/

这是它的工作版本。

通常，信息窗口是一个单独的对象，您可以使用更新的内容显示和隐藏它。您正在做的是在鼠标悬停侦听器中重新创建 InfoWindow 对象。

取而代之的是，只需在你的函数之外定义它：

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

然后就这样做：

infowindow.setContent(marker.title);
infowindow.open(map, marker);

【讨论】：