Google地图信息窗不适用于标记点击

时间:2014-01-23 06:34:54

标签: javascript google-maps google-maps-api-3

我正在使用Google Maps API v3地理编码服务。地理编码部分工作正常。我在文本框中键入一个邮政编码,然后点击提交按钮。然后它在我在文本框中输入的位置显示蓝色标记。然后它加载半径为20km的地方,并用红色标记显示。一切正常。但后来我遇到了一些问题。

如果我点击标记(红色或蓝色),则不会发生任何事情。我只是想不出来。我将此代码用于infowindow:

$.ajax({
    url: 'data.php',
    type: 'POST',
    data: {xmldata: jqXHR.responseText},
    success: function(locations, textStatus, jqXHR){

        var split = locations.split(",");

        var checkForDouble = split.filter(function(elem, pos) {
            return split.indexOf(elem) == pos;
        });

    for(var i = 0; i < split.length; i++){
        geocoder.geocode(
            {'address': checkForDouble[i]},
            function(results, status){
                if(results != null){
                    marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                }
            }
        );

        var infocontent = checkForDouble[i];                                        
        var infowindow = new google.maps.InfoWindow();

        google.maps.event.addListener(marker, 'click', (function(marker, infocontent) {
            return function(){
                infowindow.setContent(infocontent);
                infowindow.open(map, marker);
            }
        })(marker, infocontent));
    }                                   
}

有人可以给我一个提示我出错的地方吗?

2 个答案:

答案 0 :(得分:1)

您还需要在地理编码器调用中关闭功能。

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

function createMarker(address)
    var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
    var infocontent = address;                                        

    google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(infocontent);
            infowindow.open(map, marker);
    });
    return marker;
}
function geocodeAddress(address) {
    geocoder.geocode(
        {'address': address,
        function(results, status){
            if((results != null) && (status == google.maps.GeocoderStatus.OK)) {
               var marker = createMarker(address);
            } else alert("geocode failed on "+address+", status="+status);
        }
    );
}

$.ajax({
    url: 'data.php',
    type: 'POST',
    data: {xmldata: jqXHR.responseText},
    success: function(locations, textStatus, jqXHR){

        var split = locations.split(",");

        var checkForDouble = split.filter(function(elem, pos) {
            return split.indexOf(elem) == pos;
        });

    for(var i = 0; i < split.length; i++){
       geocodeAddress(checkForDouble[i]);
    }                              
 }

答案 1 :(得分:0)

你必须在你的监听器周围使用closure,因为它将来会使用你的参数。你必须将数据传递给匿名函数。 使用此代码,您可以获得结构。

$.ajax({
    url: 'data.php',
    type: 'POST',
    data: {xmldata: jqXHR.responseText},
    success: function(locations, textStatus, jqXHR){

        var split = locations.split(",");

        var checkForDouble = split.filter(function(elem, pos) {
            return split.indexOf(elem) == pos;
        });

    for(var i = 0; i < split.length; i++){
        geocoder.geocode(
            {'address': checkForDouble[i]},
            function(results, status){
                if(results != null){
                    marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                }
            }
        );

        (function (infocontent){
            google.maps.event.addListener(marker, 'click', function() {
                    infowindow = new google.maps.InfoWindow();
                    infowindow.setContent(infocontent);
                    infowindow.open(map, marker);
                }
            });
        })(checkForDouble[i])

    }                                   
}