Question

当您点击Google地图标记时，我尝试在网页上使用Ajax更新div。我正在尝试一些代码，但它不想工作。代码如下;基本上，当你点击三个测试标记之一时，你应该得到简单文件的内容（1.html，2.html，3.html），说“你点击1”，“你点击2”等。显示在“showdata”div。

简单的测试代码如下。我已经注释掉了麻烦的代码;标有* 1的那个似乎不起作用;将第一个标记放在地图上后，它不会对其他两个标记感到烦恼。即使将大量的infoCallback（name）函数注释掉，如下所示，它也不会产生任何结果，而它应该在没有做任何事情的情况下真正返回（？）

我已就此问题做了一些研究，但解决方案涉及使用Ajax更新标记的infoWindow本身，而不是主网页本身的div。

正如我所说，代码只是一个原型，概念证明所以它有点凌乱;）

<html>
<head>
<style>
.map-content h3 { margin: 0; padding: 5px 0 0 0; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">  </script>
<script>
// Set the Map variable
var map;
function initialize() { 
var myOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: true,
zoomControl: true,
scaleControl: true
};


var alldata = [ ["1", "50.8925", "-1.398611"],["2", "50.897222", "-1.396667"],["3", "50.896944", "-1.394167"]
];  

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
// Set the center of the map
map.setZoom(16);
var pos = new google.maps.LatLng("50.895", "-1.397");
map.setCenter(pos);

setMarkers(map, alldata);
}

function setMarkers(map, alldata) 
{   
    for (var i in alldata) 
    {   
        var name = alldata[i][0];
            var lat = alldata[i][1];
            var lng = alldata[i][2];

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

//google.maps.event.addListener(marker, 'click', infoCallback(name)); //*1
// commented out because it doesn't work
         }

}

// Initializes the Google Map
google.maps.event.addDomListener(window, 'load', initialize);


infoCallback(name) 
{  

// goes in div showdata

/*
var response;

var sendurl = name + ".html";

var xmlhttp;
var generated_html="";

if (window.XMLHttpRequest)
{

xmlhttp=new XMLHttpRequest();

}
else
{

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()
{

if(xmlhttp.readyState==2)
{

document.getElementById('showdata').innerHTML='<center>Please wait...processing...<p><img src="green_rot.gif"></center>';
}

if(xmlhttp.readyState==3)
{

document.getElementById('showdata').innerHTML='<center>Please wait...processing...<p><img src="green_rot.gif"></center>';
}

if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
    var response = xmlhttp.responseText;
    document.getElementById('showdata').innerHTML = response;
}

} // end of anonymous function above

xmlhttp.open("GET",sendurl,true);
xmlhttp.send();
*/

} // end of function

google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>
<body>

<table>
<tr>
<td>
<div id="map_canvas" style="height: 500px; width: 1100px;"></div>
</td>
<td>
<div id="showdata"></div>
</td>
</tr>
</table>

</body>
</html>

Answer 1

除此之外你还有一些范围问题。

首先你应该把函数放在infocallback前面（但我猜这只是一个复制粘贴错误）

第二

//google.maps.event.addListener(marker, 'click', infoCallback(name)); //*1

如果你像这样调用infoCallback（name）它会立即被执行，所以它应该是

//google.maps.event.addListener(marker, 'click', infoCallback); //*1

但当然你不能这样给你的名字，而且infoCallBack只会得到一个mouseevent

所以要解决这个问题最好放在那里调用infoCallback并给出名称。但问题是，您将始终提供您设置的姓氏。要解决此问题，请添加一个名为setMarkers的每个循环的新函数setMarker。

请参阅下面的代码，其中显示了更改和InfoCallBack的截断版本（我只是用它来测试）

     function setMarkers(map, alldata) {
        for (var i in alldata) {
            var name = alldata[i][0];
            var lat = alldata[i][1];
            var lng = alldata[i][2];

            var latlngset;
            latlngset = new google.maps.LatLng(lat, lng);
            setMarker(map, latlngset, name);
        }
    }

    function setMarker(map, latlngset, name)
    {
        var marker = new google.maps.Marker({map: map, position: latlngset});

        google.maps.event.addListener(marker, 'click', function () {
            infoCallback(name);
        });
    }

    function infoCallback(name) {
        console.debug(name);
    }

由于代码是原型，我相信你可以根据自己的需要进行调整

通过单击Google地图中的标记，使用Ajax更新div

1 个答案: