InfoWindow显示在错误的位置 [英] InfoWindow showing in wrong place

问题描述

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

I have little problem with my webpage. When I'm trying to show InfoWindow on marker. That windows shows on the top left corner of a map instead of on the marker. Just like in screen below:

这是我用来放置标记和使用InfoWindows的脚本.

Here is my script I use for placing markers and using 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/

here all on jsfiddle: http://jsfiddle.net/24q8n/

推荐答案

您正在使用 marker.name ，它是 undefined .因此，您要为 setContent 分配未定义的内容，这显然会阻止 infoWindow 正常工作并最终出现在左上角.删除 infowindow.setContent(marker.name)或将其替换为具有诸如 marker.title 的值.或在定义 var marker = ... :

You are using marker.name which is undefined. So you are assigning undefined to setContent what apparently stops the infoWindow from working and ends up in the top left corner. Remove infowindow.setContent(marker.name) or replace it with something that does have a value like marker.title. Or define marker.name when you define 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)); 

这篇关于InfoWindow显示在错误的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！