Question

我正在构建一个带有多个标记的GoogleMap，其中包含infowindows。我试图使用原型将其构建为可重复使用的Javascript类，但我的infowindows将无法打开（标记显示正常）。

如果我在click事件监听器中测试console.log它会触发，但infowindows自己拒绝打开。

Markers.json只是一个JSON对象，它返回要循环的数据列表。

我正在使用以下方式启动地图：

$(document).ready(function(){
    var customMap = new CustomMap('mapitems');
    customMap.init();
    customMap.setMarkers();
});

我的Javascript：

function CustomMap(mapId, defaultLat, defaultLng, defaultZoom)
{
    this.map = null;
    this.markerBounds = null;
    this.$mapContainer = document.getElementById(mapId);
    this.defaultLat = (defaultLat ? defaultLat : '-36.848460');
    this.defaultLng = (defaultLng ? defaultLng : '174.763332');
    this.defaultZoom = (defaultZoom ? defaultZoom : 15);
}

CustomMap.prototype.init = function() {
    var position = new google.maps.LatLng(this.defaultLat, this.defaultLng);
    this.map = new google.maps.Map(this.$mapContainer, {
        scrollwheel: true,
        mapTypeId: 'roadmap',
        zoom: this.defaultZoom,
        position: position
    });
    this.markerBounds = new google.maps.LatLngBounds();
};

CustomMap.prototype.setMarkers = function() {
    var that = this;
    $.get('/locations.json', null, function(locations) {
        for (var i = 0; i < locations.length; i++) {
            that.processMarker(locations[i]);
        }
        that.map.fitBounds(that.markerBounds);
    }, 'json');
};

CustomMap.prototype.processMarker = function(data) {
    if (data.lat && data.lng) {
        var position = new google.maps.LatLng(data.lat, data.lng);
        this.markerBounds.extend(position);
        var marker = this.getMarker(position);
        this.setInfoWindow(marker, data);
    }
};

CustomMap.prototype.getMarker = function(position) {
    return new google.maps.Marker({
        map: this.map,
        draggable:false,
        position: position
    });
};

CustomMap.prototype.setInfoWindow = function(marker, data) {
    var that = this;
    marker.infoWindow = new google.maps.InfoWindow({
        content: that.buildInfoHtml(data)
    });
    google.maps.event.addListener(marker, 'click', function() {
        marker.infoWindow.open(that.map, marker);
    });
};

CustomMap.prototype.buildInfoHtml = function(data) {
    var html = '';
    html += '<strong>' + data.title + '</strong><br>';
    if (data.address.length > 0)
        html += data.address + '<br>';
    if (data.freephone.length > 0)
        html += 'Freephone: ' + data.freephone + '<br>';
    if (data.depotPhone.length > 0)
        html += 'Depot Phone: ' + data.depotPhone + '<br>';
    if (data.hours.length > 0)
        html += 'Depot Hours: ' + data.hours + '<br>';

    return html;
};

谷歌地图API V3，标记InfoWindows无法打开

0 个答案: