javascript - 获取 Google map XML 文件的最后一个节点

Question

我一直在使用 Google map API v3，因为 v2 已弃用，不再适用于我的网站

我想显示与该页面相关的当前标记，而不是在 map 上显示 xml 文件中的每个指针。我有一个事件页面，因此我想显示有关该事件的信息并显示从 xml 文件获取的该事件的 map 。

除了我需要在 url 中指定一个 id 之外，我一切正常，这是我需要做的，但是如果 url 中没有设置 id 该怎么办。

假设我的网址是 www.mysite.com/events.php，它不会显示 map ，因为没有 id，但如果我使用 www.mysite.com/events.php?id=1 map 将显示

我需要的是确定 id 是否在 url 中，如果没有，找到 xml 文件的最后一个标记并显示它，因为它将是最新的

这是谷歌代码以及我添加的内容，用于检查网址中的 id 是否存在

   function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(50.618438, -3.420304),
            zoom: 13,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP file
          downloadUrl("results.xml", function(data) {
            var xml = data.responseXML;
            var the_id = gup('id');

            var markers = xml.documentElement.getElementsByTagName("marker");
            var last = markers.length-1;

            for (var i = 0; i < markers.length; i++) {
                if (markers[i].hasAttribute('id')) {
                    //if there is, test its value
                    if (markers[i].getAttribute('id') == the_id) {
                          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);
                     }
                     else {
                         var name = markers[last].getAttribute("name");
                          var address = markers[last].getAttribute("address");
                          var type = markers[last].getAttribute("type");
                          var point = new google.maps.LatLng(
                              parseFloat(markers[last].getAttribute("lat")),
                              parseFloat(markers[last].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);
                     }

                }
            }
          });
        }

我添加了一个 else，因此它应该用最后一个 xml 标记替换 for 循环中的 i，但它不起作用

这是从 url 获取 id 的函数

function gup( name ) {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

我想我需要检查 id 是否存在，如果不存在，则获取最后一个标记。

Answer 1

啊...一方面，您的“else”子句处于错误的级别(并且附加到错误的 if 上)。 对于每个具有 id 的标记，它都会执行一次，因为它位于 for 循环内。至少，您应该将 else 移出 for 循环。

但是 for 循环也是不必要的。不要循环遍历标记元素来检查哪个元素具有正确的 id，而是使用 getElementById(id):

 var the_id = gup('id');
 var respDoc = data.responseXML.documentElement
 var the_marker = respDoc.getElementById(the_id);
 // If the_id is '' then there will be no such marker, and the_marker will be
 // null, which is "falsy".
 if (!the_marker) {
   var markers = respDoc.getElementsByTagName("marker");
   // check whether there are any markers.
   if (markers.length < 1) return; // avoid errors
   the_marker = markers[markers.length - 1];
 }
 // Now do what you need to with the_marker.getAttribute("name") etc.
 // This is just your code, with markers[i] replaced by the_marker:
 var name = the_marker.getAttribute("name");
 var address = the_marker.getAttribute("address");
 var type = the_marker.getAttribute("type");
 var point = new google.maps.LatLng(
   parseFloat(the_marker.getAttribute("lat")),
   parseFloat(the_marker.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);

(未经测试。)

最后，我注意到您使用的 gup() 正在查看 window.location.href，即当前网页的 URL。这就是您想要的，对吗？好的，只是检查...