从 Web 解析 XML 并在 google map api 上添加多个标记

Question

我想通过从网络解析 XML 获取坐标，并在谷歌地图上添加多个标记。我可以得到坐标，但标记不显示。我该如何解决我的问题？没有错误。

这是 XML 数据之一。

<row>
 <COT_ADDR_FULL_NEW>서울특별시 동대문구 홍릉로1길 26</COT_ADDR_FULL_NEW>
 <COT_ADDR_FULL_OLD>서울특별시 동대문구 청량리동 777</COT_ADDR_FULL_OLD>
 <COT_COORD_X>127.043361984</COT_COORD_X>
 <COT_COORD_Y>37.580800789</COT_COORD_Y>
 <COT_CONTS_ID>Sijang_ddm_015</COT_CONTS_ID>
 <COT_CONTS_LAN_TYPE>KOR</COT_CONTS_LAN_TYPE>
 <COT_CONTS_NAME>청량리전통시장</COT_CONTS_NAME>
 <COT_SI_NAME/>
 <COT_GU_NAME>동대문구</COT_GU_NAME>
 <COT_DONG_NAME/>
 <COT_SAN_NAME/>
 <COT_MASTER_NO/>
 <COT_SLAVE_NO/>
 <COT_EXTRA_NAME/>
 <COT_TEL_NO>966-1040</COT_TEL_NO>
</row>

这是我的 javascript 代码。

  <script type="text/javascript">
    var map;
    var marker;
    var loc; // for saving coordinates that get from XML


    window.onload = function() {
      getXML();

      console.log(seoul);
      var seoul = {
        lat: 37.558424,
        lng: 127.000509
      };
      map = new google.maps.Map(
        document.getElementById('map'), {
          zoom: 11,
          center: seoul
        });
    }

    // function that sets map markers
    function setMarkers() {
      console.log("setMarkers");
      console.log(loc);
      /*for (var i = 0; i < Object.keys(locations).length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(Object.values(locations)),
          map: map
        });
      }*/
      marker = new google.maps.Marker({
        position: loc, // seet map marker position with loc
        map: map
      });
    }

    function getXML() {
      alert("getXML 실행");
      var xhr = new XMLHttpRequest();
      var url = "http://openapi.seoul.go.kr:8088/MY_API_KEY/xml/MgisIndepen/1/250/ ";
      xhr.open("GET", url);
      xhr.send("");

      xhr.onreadystatechange = function() {

        if (this.readyState == 4) {
          var xml = xhr.responseXML;
          var datas = xml.getElementsByTagName("row");
          var output = "";
          var count = 0;
          for (var i = 0; i < datas.length; i++) {
            if (typeof datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == undefined ||
              datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == null) {
              continue;
            } else {
              var lat = Number(datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0].nodeValue);
              var lng = Number(datas[i].getElementsByTagName("COT_COORD_Y")[0].childNodes[0].nodeValue)

              console.log(lat + " " + lng);
              loc = {lat: lat, lng: lng};
            } // else
          setMarkers(); // after parse all XML datas, call setMarkers function
          } // for
        } // if(this.readyState == 4)
      };
    }
  </script>

XML 解析效果很好。我认为在地图上保存坐标或设置位置有一些问题。

Answer 1

两个问题：

1. 您的纬度和经度是倒数的（COT_COORD_X 是经度，COT_COORD_Y 是纬度）。

{纬度：127.043361984，液化天然气：37.580800789}

（纬度必须在90到-90之间，地图中心是：

 var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };

1. 您的代码中存在排序问题。在调用getXML() 函数之后初始化地图，因此在该函数中创建的标记不会添加到地图中。

代替：

window.onload = function() {
  getXML();

  console.log(seoul);
  var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 11,
      center: seoul
    });
}

做：

window.onload = function() {
  var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };
  console.log(seoul);
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 11,
      center: seoul
    });
  getXML();
}

proof of concept fiddle

代码 sn-p：

var map;
var marker;
var loc; // for saving coordinates that get from XML


window.onload = function() {
  var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };
  console.log(seoul);
  map = new google.maps.Map(
    document.getElementById('map'), {
      zoom: 11,
      center: seoul
    });
  getXML();
}

// function that sets map markers
function setMarkers() {
  console.log("setMarkers");
  console.log(loc);
  /*for (var i = 0; i < Object.keys(locations).length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(Object.values(locations)),
      map: map
    });
  }*/
  marker = new google.maps.Marker({
    position: loc, // seet map marker position with loc
    map: map
  });
}

function getXML() {
  // alert("getXML 실행");
  var xml = parseXml(xmlData);
  var datas = xml.getElementsByTagName("row");
  var output = "";
  var count = 0;
  for (var i = 0; i < datas.length; i++) {
    if (typeof datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == undefined ||
      datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0] == null) {
      continue;
    } else {
      var lng = Number(datas[i].getElementsByTagName("COT_COORD_X")[0].childNodes[0].nodeValue);
      var lat = Number(datas[i].getElementsByTagName("COT_COORD_Y")[0].childNodes[0].nodeValue)

      console.log(lat + " " + lng);
      loc = {
        lat: lat,
        lng: lng
      };
    } // else
    setMarkers(); // after parse all XML datas, call setMarkers function
  } // for
}

function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser).parseFromString(str, 'text/xml');
  }
};
var xmlData = '<rows><row><COT_ADDR_FULL_NEW>서울특별시 동대문구 홍릉로1길 26</COT_ADDR_FULL_NEW><COT_ADDR_FULL_OLD>서울특별시 동대문구 청량리동 777</COT_ADDR_FULL_OLD><COT_COORD_X>127.043361984</COT_COORD_X><COT_COORD_Y>37.580800789</COT_COORD_Y><COT_CONTS_ID>Sijang_ddm_015</COT_CONTS_ID><COT_CONTS_LAN_TYPE>KOR</COT_CONTS_LAN_TYPE><COT_CONTS_NAME>청량리전통시장</COT_CONTS_NAME><COT_SI_NAME/><COT_GU_NAME>동대문구</COT_GU_NAME><COT_DONG_NAME/><COT_SAN_NAME/><COT_MASTER_NO/><COT_SLAVE_NO/><COT_EXTRA_NAME/><COT_TEL_NO>966-1040</COT_TEL_NO></row></rows>;'

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>