XML 파일에서 Google Map API로 마커로드

내 목표는 SQL 데이터베이스에서 마커를로드하여 googlemap에 표시하는 것입니다. 하지만 난 그냥 XML 파일에서 마커를 읽으려고 힘든 시간을 보내고.XML 파일에서 Google Map API로 마커로드

여기 내 HTML 파일

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 

     html, body, #map-canvas 
     { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script> 


      function initialize() 
      { 

       var mapOptions = 
       { 
       zoom: 12, 
       center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin 
       }; 

      var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

      } 

      function loadXMLFile(){ 
      var filename = 'markers.xml'; 
      $.ajax({ 
       type: "GET", 
       url: filename , 
       dataType: "xml", 
       success: parseXML, 
       error : onXMLLoadFailed 
      }); 

      function onXMLLoadFailed(){ 
      alert("An Error has occurred."); 
      } 

      function parseXML(xml){ 
      container = new nokia.maps.map.Container(); 
      $(xml).find("marker").each(function(){ 
       //Read the name, address, latitude and longitude for each Marker 
       var nme = $(this).find('name').text(); 
       var address = $(this).find('address').text(); 
       var lat = $(this).find('lat').text(); 
       var lng = $(this).find('lng').text(); 
       var markerCoords = new nokia.maps.geo.Coordinate 
        (parseFloat(lat), parseFloat(lng));  
       container.objects.add(new nokia.maps.map.StandardMarker(
        markerCoords, {text:nme}));  

      }); 
      map.objects.add(container); 
      map.zoomTo(container.getBoundingBox(), false); 
     } 


} 
      google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

이며,이 내 xml 파일

<?xml version="1.0"?> 
<markers> 
    <marker> 
     <name>M1</name> 
     <address>Abbey Street</address> 
     <lat>53.3496</lat> 
     <lng>-6.257</lng> 
    </marker> 
    </markers>

맵 렌더링입니다하지만 마커가지도에 표시되지 않습니다. 나는이 문제를 수사했지만 구글이 도움이되는 것을 찾지 못한다.

출처

2014-01-24 user3232726

? 어떤 자바 스크립트 오류? – geocodezip

주요 문제는 결코 loadXMLFile을 호출하지 않는다는 것입니다. – geocodezip

또한 모든 노키아 객체가 정의되어 있지 않습니다. – geocodezip

당신은 당신이 google.maps.Markers를 작성하지 않는
은 (대신 일부 노키아 API에서 구문이 모양) jQuery 라이브러리를 포함하지 않는 loadXMLFile()

를 호출하지 않습니다 .

<!DOCTYPE html> 
<html> 
<head> 
<title>Simple Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 

    html, body, #map-canvas 
    { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
<script> 

var map = null; 
function initialize() 
{ 

    var mapOptions = 
     { 
      zoom: 12, 
      center:new google.maps.LatLng(53.3478, -6.2597)//center over dublin 
     }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    loadXMLFile(); 
} 

function loadXMLFile(){ 
    var filename = 'v3_SO_20140124_markers.xml'; 
    $.ajax({ 
      type: "GET", 
      url: filename , 
      dataType: "xml", 
      success: parseXML, 
      error : onXMLLoadFailed 
    }); 

    function onXMLLoadFailed(){ 
    alert("An Error has occurred."); 
    } 

    function parseXML(xml){ 
    var bounds = new google.maps.LatLngBounds(); 
    $(xml).find("marker").each(function(){ 
      //Read the name, address, latitude and longitude for each Marker 
      var nme = $(this).find('name').text(); 
      var address = $(this).find('address').text(); 
      var lat = $(this).find('lat').text(); 
      var lng = $(this).find('lng').text(); 
      var markerCoords = new google.maps.LatLng(parseFloat(lat), 
                 parseFloat(lng)); 
      bounds.extend(markerCoords); 
      var marker = new google.maps.Marker({position: markerCoords, map:map}); 
     }); 
     map.fitBounds(bounds); 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script>

당신이 당신의 페이지에 JQuery와 포함한

working example

출처

2014-01-24 16:45:11 geocodezip

코드가 도움을 주셔서 감사합니다! 필자가 지금 가지고있는 유일한 문제는 markers.xml 파일을 읽지 못하는 것입니다. 나는 그것이 내 프로젝트 파일에 포함되어 있다고 생각했기 때문에 파일 이름이 c : \ ...... \ markers.xml로 바뀌었지만 파일 이름 위치가 아닐지도 모른다. 나는 아마 어리석은 짓을하는 것을 알고있다. 잘못된 일을하고 있지만, 하루 종일이 문제를 인터넷 검색하고 아무 것도 찾을 수없는 것 같다. – user3232726

내 [작업 예제] (http://www.geocodezip.com/v3_SO_readXmlElements.html)가 작동한다. XML 파일은 페이지와 같은 디렉토리에 있습니다. 동일한 서버의 다른 디렉토리에있는 경우 상대 주소를 사용해야합니다. 다른 서버에 있으면 상호 도메인 문제를 처리해야합니다. ajax 호출에서 얻는 오류 메시지를보십시오. – geocodezip

XML 파일에서 Google Map API로 마커로드

답변

관련 문제