InfoWindow在錯誤的地方顯示

我的網頁沒有問題。當我試圖在標記上顯示InfoWindow時。該窗口顯示在地圖的左上角而不是標記上。就像在屏幕下面： enter image description here 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/

來源

2013-12-23 szpic

您應提供完整的代碼，如果可能的話的jsfiddle。 – MrUpsidown

已添加！ - > http://jsfiddle.net/24q8n/ – szpic

'marker.name'不存在。你正試圖用'setContent'添加它。這會產生錯誤，並將您的infowindow放置在錯誤的地方。使用'marker.title'或者不是'undefined'的東西。 – putvande

您正在使用marker.name這是undefined。因此，您將未定義分配給setContent顯然會阻止infoWindow工作，並且會在左上角結束。刪除infowindow.setContent(marker.name)或將其替換爲值爲marker.title的值。或定義marker.name當你定義var marker = ...：

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

來源

2013-12-23 09:44:51 putvande

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

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

這裏是它的一個工作版本。

通常情況下，一個信息窗口是一個單一的對象，你顯示和隱藏更新的內容。你正在做的是在鼠標懸停偵聽器中重新創建InfoWindow對象。

取而代之的是，只是把它定義你的功能之外：

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

，然後就去做：

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

來源

2013-12-23 10:03:36 MrUpsidown

InfoWindow在錯誤的地方顯示

回答

相關問題