Fatal编程技术网
  • javascript/
  • Javascript 谷歌地图API的XML解析问题

Javascript 谷歌地图API的XML解析问题

javascript xml google-maps google-maps-api-3

Javascript 谷歌地图API的XML解析问题,javascript,xml,google-maps,google-maps-api-3,Javascript,Xml,Google Maps,Google Maps Api 3,我正在尝试使用XML文档中的数据向google api地图添加标记，遵循本网站的教程： 我正在使用的xml文件发布在下面 <!-- - phpMyAdmin XML Dump - version 4.7.0 - https://www.phpmyadmin.net - - Host: 127.0.0.1 - Generation Time: Aug 04, 2017 at 03:20 AM - Server version: 10.1.25-MariaDB - PHP Version:

我正在尝试使用XML文档中的数据向google api地图添加标记，遵循本网站的教程：

我正在使用的xml文件发布在下面

<!--

- phpMyAdmin XML Dump
- version 4.7.0
- https://www.phpmyadmin.net
-
- Host: 127.0.0.1
- Generation Time: Aug 04, 2017 at 03:20 AM
- Server version: 10.1.25-MariaDB
- PHP Version: 7.1.7
-->
<pma_xml_export xmlns:pma="https://www.phpmyadmin.net/some_doc_url/" version="1.0">
<!-- 
    - Structure schemas
     -->
<pma:structure_schemas>...</pma:structure_schemas>
<!-- 
    - Database: 'aogcc test'
     -->
<database name="aogcc test">
<!--  Table markers  -->
<table name="markers">
<column name="markers_id">1</column>
<column name="API_WellNo">50009100010000</column>
<column name="PermitNumber">1630190</column>
<column name="OpNo">136555</column>
<column name="WellName">ROMIG PARK INC</column>
<column name="WellNumber">1</column>
<column name="WellUnit">00000</column>
<column name="CurrentClass">EXP</column>
<column name="CurrentStatus">P&A</column>
<column name="CurrentDateStatus">1997-05-15 00:00:00</column>
<column name="PermitClass">EXP</column>
<column name="PermitStatus">1-OIL</column>
<column name="CompClass">EXP</column>
<column name="CompStatus">P&A</column>
<column name="DTD">11566</column>
<column name="TVD">11325</column>
<column name="Sales_Cd">NULL</column>
<column name="Actg_Grp">0</column>
<column name="Mult_Latrl">0</column>
<column name="CompNum">0</column>
<column name="Field_No">0</column>
<column name="Wh_GeoArea">820</column>
<column name="Wh_Lat">15.245</column>
<column name="Wh_Long">-152.54</column>
</table>
</database>
</pma_xml_export>


...
1.
50009100010000
1630190
136555
罗米格公园公司
1.
00000
经验
损益表
1997-05-15 00:00:00
经验
1-油
经验
损益表
11566
11325
无效的
0
0
0
0
820
15.245
-152.54
使用以下HTML代码：

html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
        width: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 100;
        padding: 0;

      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(45.787172, -15.870226),
          zoom: 2
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('http://127.0.0.1:8080/markers.xml', function(data) {
            var xml = data.responseXML;
            window.alert(xml)


            var markers = xml.documentElement.getElementsByTagName('table name="markers"');

            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getElementsByTagName('column name="markers_id"');
              var name = markerElem.getElementsByTagName('column name="WellName"');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getElementsByTagName('column name="Wh_Lat"')),
                  parseFloat(markerElem.getElementsByTagName('column name="Wh_Long"')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
  </body>
</html>

html>
在Google地图中使用MySQL和PHP
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
宽度：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：100；
填充：0；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（45.787172，-15.870226），
缩放：2
});
var infoWindow=new google.maps.infoWindow；
//根据PHP或XML文件的名称进行更改
下载URL（'http://127.0.0.1:8080/markers.xml，函数（数据）{
var xml=data.responseXML；
window.alert（xml）
var markers=xml.documentElement.getElementsByTagName（'table name=“markers”'）；
Array.prototype.forEach.call（markers，function（markereem））{
var id=markereem.getElementsByTagName（'column name=“markers_id”'）；
var name=markereem.getElementsByTagName（'column name=“WellName”'）；
var point=new google.maps.LatLng(
parseFloat（markereem.getElementsByTagName（'column name=“Wh_Lat”'）），
parseFloat（markerem.getElementsByTagName（'column name=“Wh_Long”））；
var infowincontent=document.createElement（'div'）；
var strong=document.createElement（'strong'）；
strong.textContent=名称
infowincontent.appendChild（强）；
infowincontent.appendChild（document.createElement（'br'））；
var text=document.createElement（'text'）；
text.textContent=地址
infowincontent.appendChild（文本）；
var icon=customLabel[type]| |{}；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
标签：icon.label
});
marker.addListener（'click'，function（））{
setContent（infowincontent）；
信息窗口。打开（地图、标记）；
});
});
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
但是，我很难通过解析XML文件来检索名称、纬度和经度，然后将其提供给GoogleMapsAPI

任何帮助都将不胜感激

  • 您的xml无效。应该有
    &而不是&
  • getElementsByTagName只能按名称选择元素。向名称添加属性将不起作用。因此，您必须迭代所有元素并过滤所需内容，或者使用xpath选择具有所需属性的元素

    var columns = markerElem.getElementsByTagName('column');

var lat, lng;

Array.prototype.forEach.call(columns, function(column) {
    if (column.getAttribute("name") == "Wh_Lat") {
        lat = column.firstChild.nodeValue;
    } else if (column.getAttribute("name") == "Wh_Long") {
        lng = column.firstChild.nodeValue;
    }
});

var point = new google.maps.LatLng(parseFloat(lat), parseFloat(lng));