【问题标题】:Dynamically adding markers to Google maps向谷歌地图动态添加标记
【发布时间】:2013-12-29 10:36:01
【问题描述】:

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

当我提醒返回部分(ALERT TEST TO ENSURE PHP PROCESSED DATA FORCORRECTLY)时,它看起来没问题,但我似乎无法将返回中的标记添加到我的地图上。

请参阅下面的代码。
//发送数据到 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());
        }                           

【问题讨论】:

    标签: javascript php ajax google-maps


    【解决方案1】:

    我为我的问题找到的答案是使用 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,
            });
            });
            }); 
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-09-23
      • 2013-04-01
      • 1970-01-01
      • 1970-01-01
      • 2013-01-03
      • 1970-01-01
      相关资源
      最近更新 更多