Google Maps API:XML文件中的标记未显示 [英] Google Maps API: Markers from XML file not being displayed

问题描述

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

Using code that was posted on here, I'm trying to map markers from an XML file to a Google Map in a JSP using the Google Maps Javascript API V3.

我的标记文件具有以下格式:

My markers file has the following format:

<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:不是字符串

When I load the page, I see an error in he console: InvalidValueError: setTitle: not a string

我做错了什么?标记未出现在地图上.

What am I doing wrong? The markers are not appearing on the map.

推荐答案

由于名称"不是字符串，而是XML DOM对象，因此出现此错误.有一个功能nodeValue可用于从XML DOM元素中获取字符串内容.

You are getting that error because "name" is not a string, it is an XML DOM object. There is a function nodeValue that can be used to get the string content out of an XML DOM element.

此外，您的纬度和经度无效，也不是十进制数.

Also, your latitude and longitude are not valid, they are not in decimal degrees.

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是从 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;
};

工作小提琴

这篇关于Google Maps API:XML文件中的标记未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！