Question

我有一个工作地图，根据ajax调用和其他一些选项加载标记，如下所示，现在我试图为每个标记添加一个信息窗口。下面的代码添加标记但是当我点击标记时没有显示infowindow，根本没有控制台或浏览器错误，有任何建议吗？！

除了infowindow之外，一切都很有效，我能想到的唯一可能是问题是标记需要先绘制才能添加一个监听器！？

var map;
var mapMarkers = [];

function displayMap()
{
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        disableDefaultUI: true,
        zoomControl: true
    });

    map.setCenter({lat: 40.7127837, lng: -74.00594130000002});
}

function addMarker(lat, lng, icon, infobox) {
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: map,
        icon: icon
    });

    attachMessage(marker, infobox);

    mapMarkers.push(marker);
}

function attachMessage(marker, message) {
    var infowindow = new google.maps.InfoWindow({
        content: message
    });

    marker.addListener('click', function() {
        infowindow.open(marker.get('map'), marker);
    });
}

function setMapOnAllmap(map) {
    for (var i = 0; i < mapMarkers.length; i++) {
        mapMarkers[i].setMap(map);
    }
}

function clearMarkers() {
    setMapOnAllmap(null);
}

function deleteMarkers() {
    clearMarkers();
    mapMarkers = [];
}

function loadMarkerData(op1, op2, op3)
{
    var data = {id: 1, op1:op1, op2:op2, op3:op3};

    $.ajax(
    {
        url: "ajax.php",
        type: "POST",
        data: data,
        beforeSend: function ()
        {
            deleteMarkers();
        },
        success: function (data, textStatus, jqXHR)
        {
            if (data != '') {
                markerObj = eval(data);

                $.each(markerObj, function(index, element) {
                    addMarker(element.lat, element.lng, element.icon, element.infobox)
                });
            }
        },
        error: function (jqXHR, textStatus, errorThrown)
        {
            console.log(textStatus);
        }
    });
}

ajax调用返回的数据示例如下： [{"lat":"0.00000000000000","lng":"0.00000000000000","icon":"../marker.png","info":"information for the infobox"}]

Answer 1

我设法通过使用闭包来解决这个问题，我遇到了问题的代码，如下所示，infowindow被替换，infowindow现在正在显示。

当前

function addMarker(lat, lng, icon, infobox) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map, icon: icon }); attachMessage(marker, infobox); mapMarkers.push(marker); } function attachMessage(marker, message) { var infowindow = new google.maps.InfoWindow({ content: message }); marker.addListener('click', function() { infowindow.open(marker.get('map'), marker); }); }

新工作代码

我使用infowindow和map变量创建了marker变量：

var map; var mapMarkers = []; var infowindow;

在地图加载函数中初始化infowindow：

function displayMap() { map = new google.maps.Map(document.getElementById('map'), { zoom: 7, disableDefaultUI: true, zoomControl: true }); infowindow = new google.maps.InfoWindow(); }

更改了addMarker功能：

function addMarker(lat, lng, icon, infobox) { var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), map: map, icon: icon }); google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow){ return function() { infowindow.setContent(content); infowindow.open(map, marker); }; })(marker, infobox, infowindow)); mapMarkers.push(marker); }

地图Infowindow没有加载

1 个答案: