0

使用这个教程，我试图将数据从 Wordpress 自定义帖子类型元框中提取到 XML 文件中，然后使用数据库值中的标记设置创建一个谷歌地图。

我添加了一个文件夹并将名为 map/generateMapXml.php 的主题目录归档

生成MapXml.php

<?php

// Create a xml doc for map
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node); 

header("Content-type: text/xml"); 


//Query the artist for info & coordinates.
$args = array(
'post_type' => 'artists',
'posts_per_page' => -1
);
$query = new WP_Query($args);
if($query->have_posts()): ?>
<?php while($query->have_posts()): ?>
    <?php $query->the_post() ?>
    <?php
        $mapName    = get_the_title();
        $mapAddress = rwmb_meta('artists_location');
        $mapLat     = rwmb_meta('artists_lat'); 
        $mapLong    = rwmb_meta('artists_long');
        $mapType    = rwmb_meta('artists_type');

        $node = $dom->createElement("marker");
        $newnode = $parnode->appendChild($node);   
        $newnode->setAttribute("name",$mapName);
        $newnode->setAttribute("address",$mapAddress);  
        $newnode->setAttribute("lat",$mapLat);  
        $newnode->setAttribute("lng",$mapLong);  
        $newnode->setAttribute("type",$mapType);
    ?>
<?php endwhile ?>
<?php endif ?>

<?php echo $dom->saveXML(); ?>

到目前为止，一切都很好。这将输出正确的 xml，但是当我尝试按照教程说明将文件内容拉入 jquery 时：

downloadUrl("<?php echo get_template_directory_uri(); ?>/map/generateMapXml.php",
function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                  var name = markers[i].getAttribute("name");
                  var address = markers[i].getAttribute("address");
                  var type = markers[i].getAttribute("type");
                  var point = new google.maps.LatLng(
                      parseFloat(markers[i].getAttribute("lat")),
                      parseFloat(markers[i].getAttribute("lng")));
                  var html = "<b>" + name + "</b> <br/>" + address;
                  var icon = customIcons[type] || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    shadow: icon.shadow
                  });
                  bindInfoWindow(marker, map, infoWindow, html);
                }
              });
            }
function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;

          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              request.onreadystatechange = doNothing;
              callback(request, request.status);
            }
          };

          request.open('GET', url, true);
          request.send(null);
        }

我收到 500 内部服务器错误：

GET http://localhost/test/number/wp-content/themes/testtheme/map/generateMapXml.php 500 (Internal Server Error) localhost/test/number/:93
downloadUrl localhost/test/number/:93
load localhost/test/number/:49
onload

就好像文件不存在一样。我将文件夹和文件的 chmod 设置为 777。这是由于 Wordpress 导致的错误，还是我的代码中的语法错误？或者很有可能，是否有更简单的方法来创建地图？

4

1 回答 1

0

在这方面走了一条不同的路线。这很好用。

<?php
wp_reset_postdata(); 
$args = array(
    'post_type' => 'artists',
    'posts_per_page' => -1
);
$query = new WP_Query($args);
?>
<script>
    var infowindow;
    var gmarkers = [];
    var side_bar_html = ""; 
    (function () {

      google.maps.Map.prototype.markers = new Array();

      google.maps.Map.prototype.addMarker = function(marker) {
        this.markers[this.markers.length] = marker;
      };

      google.maps.Map.prototype.getMarkers = function() {
        return this.markers
      };

      google.maps.Map.prototype.clearMarkers = function() {
        if(infowindow) {
          infowindow.close();
        }

        for(var i=0; i<this.markers.length; i++){
          this.markers[i].set_map(null);
        }
      };
    })();

function mapLoad() {
    var latlng = new google.maps.LatLng(40.734673, -73.990602);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      //mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    var a = new Array();
             <?php if($query->have_posts()): ?>
                <?php $arrayCount = 0 ?>
                <?php while($query->have_posts()): ?>
                    <?php $query->the_post() ?>
                    <?php
                        $mapName   = "";
                        $mapNames  = rwmb_meta('aiop_artists_name');
                        $nameCount = count($mapNames);
                        $i = 1;
                        foreach($mapNames as $name) {
                            if(strpos($name,',') !== false) {
                                $fullName = explode(",", $name);
                                if($nameCount > 1) {
                                    $mapName .= $fullName[1]." ".$fullName[0];
                                    if($i != $nameCount) {
                                        $mapName .= ", ";
                                    }
                                } else {
                                    $mapName .= $fullName[1]." ".$fullName[0];
                                }
                            } else {
                                $mapName = $name;
                            }
                            $i++;
                        }
                        $mapImage   = get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class' => 'mapImage'));
                        $mapTitle   = rwmb_meta('aiop_artists_project_title');
                        $mapAddress = rwmb_meta('aiop_artists_location');
                        $mapLat     = rwmb_meta('aiop_artists_lat'); 
                        $mapLong    = rwmb_meta('aiop_artists_long');
                        $mapType    = rwmb_meta('aiop_artists_type');

                        $mapTitle  = str_replace("'", '&#39;', $mapTitle);
                        $mapTitle  = str_replace('"', '&#34;', $mapTitle);

                        if($mapLat != NULL && $mapLat != "" && $mapLong != NULL && $mapLong != ""): ?>
                            <?php echo "
                                var t =  new Object();
                                t.name = '".$mapName."';
                                t.lat =  ".$mapLat.";
                                t.lng =  ".$mapLong.";
                                mapImage = '".$mapImage."';
                                mapTitle = '".$mapTitle."';
                                t.info = mapImage+'<p class=map_artistName>'+t.name+'</p><p class=map_artistTitle>'+mapTitle+'</p>';
                                a[".$arrayCount."] = t;"; ?>
                                <?php $arrayCount++ ?>
                        <?php endif ?>
                <?php endwhile ?>
            <?php endif ?>
    for (var i = 0; i < a.length; i++) {
        var latlng = new google.maps.LatLng(a[i].lat, a[i].lng);
        map.addMarker(createMarker(a[i].info,latlng));
     }
}

function createMarker(name, latlng) {
    var marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
        });
    google.maps.event.addListener(marker, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: name});
      infowindow.open(map, marker);
    });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
    return marker;
}

// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}
</script>
于 2013-10-17T20:55:35.170 回答