动态添加标记到Google地图

时间:2013-03-20 08:54:16

标签: javascript php ajax google-maps

我正在尝试使用ajax和php的组合动态添加标记到我的Google地图。 代码的第一部分将latlng发送到php文件。然后php文件返回所需的标记位置。

当我提醒返回部分(ALERT TEST以确保PHP处理数据正确)时,它看起来没问题,但我似乎无法将返回的标记添加到我的地图上。

见下面的代码 //将数据发送到URL(发送到php文件) //为地址标记返回数据(这是返回php文件产生的内容)

非常感谢,

//将数据发送到网址

     var xmlHttp = getXMLHttp();
     xmlHttp.onreadystatechange = function() {
     if (xmlHttp.readyState == 4) {
     HandleResponse(xmlHttp.responseText);
     }}                     
     xmlHttp.open("POST",'MYPHPFILE',true);
     xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
     xmlHttp.send("LATLON="+strLAT);

//为地方标记返回数据

     var wxlatlng = new google.maps.LatLng(52,1); 
     var marker = new google.maps.Marker({ 
     position: wxlatlng,
     map: map,
     icon: '../../icons/flags/traffic_light_red.png',
     title: 'TEST', });

//为地方标记返回数据

     var wxlatlng = new google.maps.LatLng(52,1.1); 
     var marker = new google.maps.Marker({ 
     position: wxlatlng,
     map: map,
     icon: '../../icons/flags/traffic_light_red.png',
     title: 'TEST', });

//警告测试以确保PHP处理数据正确

     function HandleResponse(response) {
            document.getElementById('ResponseDiv').innerHTML = response;
            alert($('#ResponseDiv').text());
        }                           

1 个答案:

答案 0 :(得分:0)

我发现我的问题的答案是使用php文件创建标记xml文件并通过jQuery响应加载xml文件

见下面的代码;

 jQuery.get(YOURXMLFILE, function(data) {
       jQuery(data).find("marker").each(function() {
       var eachMarker = jQuery(this);
       var markerCoords = new google.maps.LatLng(
       parseFloat(eachMarker.find("Lat").text()),
       parseFloat(eachMarker.find("Lng").text())
       );
       var header  = eachMarker.find("title").text();
       var content = eachMarker.find("Content").text();
       var wxicon  = eachMarker.find("icon").text();
       //--------------------------------------------------------------------------        
        marker = new google.maps.Marker({
        position: markerCoords,
        icon: wxicon,
        map: map,
        animation: google.maps.Animation.DROP,
        title: header,
        });
        });
        });