Question

使用此处发布的代码，我正在尝试使用Google Maps Javascript API V3将标记从XML文件映射到JSP中的Google Map。

我的标记文件格式如下：

<markers>
    <marker>
        <id>0</id>
        <lat>53341428</lat>
        <lng>-6246720</lng>
        <name>Fenian Street</name>
        <number>63</number>
    </marker>
    <marker>
        <id>1</id>
        <lat>53346637</lat>
        <lng>-6246154</lng>
        <name>City Quay</name>
        <number>99</number>
    </marker>

代码是：

<script type="text/javascript">

        function load() {
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(53.3430347, -6.2550587),
                zoom: 14,
                mapTypeId: 'roadmap'`enter code here`
            });
            var infoWindow = new google.maps.InfoWindow;

            downloadUrl( "markers.xml", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                    //var id = markers[i].getElement("id");
                    var id = markers[i].getElementsByTagName("id")[0];

                    var point = new google.maps.LatLng(
                            parseFloat(markers[i].getElementsByTagName("lat")[0]),
                            parseFloat(markers[i].getElementsByTagName("lng")[0]));
                    var name = markers[i].getElementsByTagName("name")[0];
                    //var number = markers[i].getElementsByTagName("number");

                    var html = "<b>" + id + "</b> <br/>" + name;

                    var image = 'img.png';

                    //var icon = customIcons[type] || {};
                    var marker = new google.maps.Marker({
                        position: point,
                        map: map,
                        title: name,
                        icon: image
                    });

                    marker.setMap(map);
                    bindInfoWindow(marker, map, infoWindow, html);
                }
            });
        }

        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);
            });
        }

        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();
        }

        function doNothing() {
        }
</script>

当我加载页面时，我在控制台中看到一个错误：InvalidValueError：setTitle：not a string

我做错了什么？标记没有出现在地图上。

Answer 1

您收到该错误是因为＆＃34; name＆＃34;不是字符串，它是XML DOM对象。有一个函数nodeValue可用于从XML DOM元素中获取字符串内容。

此外，您的纬度和经度无效，它们不是十进制度。

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

    // downloadUrl( "markers.xml", function(data) {
    // var xml = data.responseXML;
    var xml = xmlParse(xmlString);
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        //var id = markers[i].getElement("id");
        var id = nodeValue(markers[i].getElementsByTagName("id")[0]);

        var point = new google.maps.LatLng(
        parseFloat(nodeValue(markers[i].getElementsByTagName("lat")[0])),
        parseFloat(nodeValue(markers[i].getElementsByTagName("lng")[0])));
        var name = nodeValue(markers[i].getElementsByTagName("name")[0]);
        //var number = markers[i].getElementsByTagName("number");

        var html = "<b>" + id + "</b> <br/>" + name;

        var image = 'img.png';

        //var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
            position: point,
            map: map,
            title: ""+name /*,
            icon: image */
        });

        marker.setMap(map);
        bindInfoWindow(marker, map, infoWindow, html);
    }
// });
}

其中nodeValue是＆＃34;借来的＆＃34;来自geoxml3：

//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
function nodeValue (node, defVal) {
  var retStr="";
  if (!node) {
    return (typeof defVal === 'undefined' || defVal === null) ? '' : defVal;
  }
   if(node.nodeType==3||node.nodeType==4||node.nodeType==2){
      retStr+=node.nodeValue;
   }else if(node.nodeType==1||node.nodeType==9||node.nodeType==11){
      for(var i=0;i<node.childNodes.length;++i){
         retStr+=arguments.callee(node.childNodes[i]);
      }
   }
   return retStr;
};

working fiddle

Google Maps API：未显示XML文件中的标记

1 个答案: