javascript - InfoWindow 未显示在标记上方 Google Maps JavaScript API v3

Question

所以我创建了一个 jsFiddle 来演示我的问题:http://jsfiddle.net/6vpc2/1/将鼠标悬停在 jsFiddle 中的标记上可查看 InfoWindow 的位置。

我有一个 GoogleMap“对象”，用于创建 Google map 。像这样创建 Google map 后:

  var mapOptions = {
    zoom: 8, // The initial zoom level when your map loads (0-20)
    minZoom: 6, // Minimum zoom level allowed (0-20)
    maxZoom: 17, // Maximum soom level allowed (0-20)
    zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
    },
    //center: location, // Centre the Map to our coordinates variable
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Set the type of Map
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
    // All of the below are set to true by default, so simply remove if set to true:
    panControl: false, // Set to false to disable
    mapTypeControl: false, // Disable Map/Satellite switch
    scaleControl: false, // Set to false to hide scale
    streetViewControl: false, // Set to disable to hide street view
    overviewMapControl: false, // Set to false to remove overview control
    rotateControl: false // Set to false to disable rotate control
}

if (this.instances.length > 0) {
    return this.instances.pop();
}

var googleMap = new GoogleMap();
googleMap.map = new google.maps.Map(googleMap.mapCanvas, mapOptions);
return googleMap;

然后，我将 JS“对象”中的 var 设置为返回的 googleMap 值。

然后我使用 this.map(上面代码返回的 googleMap)在 map 上设置标记:

 this.latitude = latitude;
this.longitude = longitude;

var location = new google.maps.LatLng(latitude, longitude);

var infowindow = new google.maps.InfoWindow({
    content: placeMarkerContent
});

this.marker = new google.maps.Marker({
    position: location,
    map: this.map,
});

this.map.setCenter(location);

google.maps.event.addListener(this.marker, 'mouseover', function () {
    infowindow.open(this.map, this.marker);
});

google.maps.event.addListener(this.marker, 'mouseout', function () {
    infowindow.close(this.map, this.marker);
});

问题是 InfoWindow 没有显示在标记上方，请参阅我的 jsFiddle:http://jsfiddle.net/6vpc2/1/将鼠标悬停在 jsFiddle 中的标记上可查看 InfoWindow 的位置。

Answer 1

当您在鼠标悬停监听器中使用 this.marker 时，它是未定义的。在点击监听器函数中，“this”是标记。

google.maps.event.addListener(this.marker, 'mouseover', function () {
    infowindow.open(this.getMap(), this);
});

fiddle