Парсинг XML из Интернета и добавление нескольких маркеров на API Google Map - PullRequest
Новая
       47

Парсинг XML из Интернета и добавление нескольких маркеров на API Google Map

0 голосов
/ 18 мая 2019

Я хотел бы получить координаты при разборе XML из Интернета и добавить несколько маркеров на карту Google.Я могу получить координаты, но маркеры не отображаются.Как я могу исправить мою проблему?Там нет ошибки.

Это один из данных 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 работает очень хорошо.Я думаю, что сохранение координат или установка положения на карте имеют некоторые проблемы.

1 Ответ

0 голосов
/ 18 мая 2019

Два вопроса:

  1. Ваша широта и долгота задом наперед (COT_COORD_X это долгота, COT_COORD_Y это широта).

{lat:127.043361984, lng: 37.580800789}

(широта должна быть между 90 и -90, центр карты: 

 var seoul = {
    lat: 37.558424,
    lng: 127.000509
  };
В вашем коде есть проблема заказа.Карта инициализируется после , вызывается функция 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
    });
}

Do: 

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

подтверждение концепции скрипта

screenshot of resulting map

фрагмент кода: 

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>
...