11
나는이 문제를 해결 내 머리를 얻이 수없는 것

가 생성 된 XML 파일에서. 지도 아래에는지도에 표시된 모든 회사의 (자바 스크립트가 아닌) 목록을 보여 드리고자합니다. 목록에서 회사를 클릭하면지도가 해당 마커로 이동하고 infoWindow를 엽니 다. 문제는지도와 목록을 서로 다른 두 가지로 만들고 싶다는 것입니다 ...열기 정보창 (V3)

이 문제를 해결하는 올바른 방법은 무엇입니까? 감사! 내 콘솔이 나에게 markers[index].getPosition is not a function을 알려줍니다 내 목록의 첫 번째 항목을 보여줍니다 중요

function initialize_member_map(lang) { 
    var map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    downloadUrl("/ajax/member-xml-output.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
    var company = markers[i].getAttribute("company"); 
    var address = markers[i].getAttribute("address"); 
    var type = markers[i].getAttribute("type"); 
    var uid = markers[i].getAttribute("uid"); // Primary key of company table in MySQL 
    var point = new google.maps.LatLng(
     parseFloat(markers[i].getAttribute("lat")), 
     parseFloat(markers[i].getAttribute("lng"))); 
    var html = "<b>" + company + "</b> <br/>" + address; 
    bounds.extend(point);  
    var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid // Some experiments, wanted to use this to target specific markers... 
    }); 
    bindInfoWindow(marker, map, infoWindow, html); 
    }   
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
}); 
} 

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(null); 
} 
function doNothing() {} 

, 나는 다음을 시도한 마이클에 의해 제안에 따라,하지만 두 가지 문제가 발생하고 ... 모든 markerinfo가 동적이다 undefined이되어야합니다. 좀 도와 줄 수있어?

//JavaScript Document 
var map; 
var markers = new Array(); 
var company_list; 
function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < markers.length; i++) { 
     var company = markers[i].getAttribute("company"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var uid = markers[i].getAttribute("uid"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + company + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
     company_list += "<div onclick=scrollToMarker(" + i + ")>"+company+"</div>"; 
    }  
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 
    //display company data in html 
    document.getElementById("company_list").innerHTML = company_list; 
    }); 

} 

function scrollToMarker(index) { 
    map.panTo(markers[index].getPosition()); 
} 

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(null); 
} 
function doNothing(){ 
} 

답변

8

올바른 길을 가고 있습니다. Marker 객체에 대해 별도의 전역 배열을 만들고 생성 된 모든 마커를이 배열에 푸시하면됩니다. 모든 회사 데이터를 html로 작성하면 클릭시 마커 인덱스로 호출이 포함됩니다. 다음은 예제 코드입니다. XML 대신 회사 정보를 보유하기 위해 JSON을 데이터 구조로 사용했습니다.

확인

<html> 
 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
 
    <title>Google Maps Scroll to Marker</title> 
 

 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 

 
</head> 
 
<body onload="initialize()"> 
 

 
    <div id="map_canvas" style="width: 900px;height: 600px;"></div> 
 
    <div id="companies"></div> 
 
    <script type="text/javascript"> 
 
     var map; 
 
     //JSON of company data - equivalent of your XML 
 
     companies = { 
 
      "data": [ 
 
      { 
 
       "name": "Company 1", 
 
       "lat": 42.166, 
 
       "lng": -87.848 
 
      }, 
 
      { 
 
       "name": "Company 2", 
 
       "lat": 41.8358, 
 
       "lng": -87.7128 
 
      }, 
 
      { 
 
       "name": "Company 3", 
 
       "lat": 41.463, 
 

 
       "lng": -88.870 
 
      }, 
 
      {"name":"Company 4", 
 
      "lat":41.809, "lng":-87.790} \t \t 
 
      ] 
 
     } 
 
     //we will use this to store google map Marker objects 
 
     var markers=new Array(); 
 
     function initialize() { 
 
      var chicago = new google.maps.LatLng(41.875696,-87.624207); 
 
      var myOptions = { 
 
       zoom: 9, 
 
       center: chicago, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      } 
 
      map = new google.maps.Map(document.getElementById("map_canvas"), 
 
       myOptions); 
 
      listCompanies(); 
 
     } \t \t 
 

 
     function listCompanies() { 
 
      html = "" 
 
     //loop through all companies 
 
     for (i=0;i<companies.data.length;i++) { 
 
     //get the maker postion 
 
     lat = companies.data[i].lat 
 
     lng = companies.data[i].lng 
 

 
     //add google maps marker 
 
     marker = new google.maps.Marker({ 
 
      map:map, 
 
      position: new google.maps.LatLng(lat,lng), 
 
      title: companies.data[i].name 
 
     }) 
 
     markers.push(marker); 
 
     html += "<div onclick=scrollToMarker(" + i + ")>"+companies.data[i].name+"</div>"; 
 
     } 
 
     //display company data in html 
 
     document.getElementById("companies").innerHTML =html; 
 
     } 
 

 
     function scrollToMarker(index) { 
 
      map.panTo(markers[index].getPosition()); 
 
     } 
 
</script> 
 

 
</body> 
 
</html>

나는 당신을 위해 다른 솔루션을 추가 - 코드를 uising. 이 함수는 bindInfWindow 함수를 사용하여 DOM (HTML) 클릭 이벤트를 바인드하여 정보 창을 열고 마커로 스크롤합니다. 회사를 동적으로로드하기 때문에 이름을 포함하는 div (또는 다른 태그)는 이벤트를 바인딩하기 전에 DOM에 존재해야합니다. 따라서 실행해야하는 첫 번째 기능은 회사를 렌더링하는 기능입니다 HTML (맵 초기화가 아님). 나는이 대답을 제거 할 수 없기 때문에 .. 나는 당신의 데이터가없는 나는이 하나를 테스트하지 않았습니다

//you must write out company divs first 

<body onload="showCompanies()"> 



<script> 
//JavaScript Document 
var map; 
//this is your text data 
var markers = new Array(); 


//you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized 
function showCompanies() { 
downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { 
    var xml = data.responseXML; 
    markers = xml.documentElement.getElementsByTagName("marker"); 

    for (var i = 0; i < markers.length; i++) { 
     var company = markers[i].getAttribute("company"); 

     markerId = "id_"+i; 

     company_list += "<div id="+markerId+">"+company+"</div>"; 
    }  

    //display company data in html 
    document.getElementById("company_list").innerHTML = company_list; 

    //now you are ready to initialize map 
    initialize_member_map("lang") 
    }); 
} 

function initialize_member_map(lang) { 
    map = new google.maps.Map(document.getElementById("large-map-canvas"), { 
    center: new google.maps.LatLng(50.85034, 4.35171), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 




    var xml = data.responseXML; 

    var bounds = new google.maps.LatLngBounds(); 
    //your company data was read in and is ready to be mapped 
    for (var i = 0; i < markers.length; i++) { 
     var infoWindow = new google.maps.InfoWindow; 
     var company = markers[i].getAttribute("company"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var uid = markers[i].getAttribute("uid"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + company + "</b> <br/>" + address; 
     bounds.extend(point); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     uid: uid 
     }); 
     //add the new marker object to the gMarkers array 

     markerId = "id_"+i; 
     bindInfoWindow(marker, map, infoWindow, html,markerId); 

    }  
    map.setCenter(bounds.getCenter()); 
    map.fitBounds(bounds); 


} 

function scrollToMarker(index) { 
    map.panTo(markers[index].getPosition()); 
} 

function bindInfoWindow(marker, map, infoWindow, html, markerId) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
    //bind onlcick events to the div or other object in html 
    markerObj = document.getElementById(markerId); 
    //you can create DOM event listeners for the map 
    google.maps.event.addDomListener(markerObj, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    map.panTo(marker.getPosition()); 
    }); 

} 

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> 
+0

감사합니다 도움이되기를 바랍니다. 나는 당신의 제안을 시도했지만, 위의 질문에서 설명한 두 가지에 붙어 있습니다. 도와 주실 수 있겠습니까? 감사! – maartenmachiels

+0

마커 개체가 아닌 XML (텍스트 데이터)을 저장하는 배열의 마커 속성에 액세스하려고합니다. 미안, 필자의 대본에서 객체 배열 마커라고 불렀다. 당신이해야 할 일은 구글 맵핑 마커 객체를 유지하기 위해 다른 배열을 방어하는 것입니다. gMarkers라고 부르면 각 마커를 그 위에 놓습니다. – Michal

+0

그런 다음 마커의 참조를 scrollToMarker()의 gMarkers로 변경해야합니다. – Michal

0

을 유의하시기 바랍니다, 나는 몇 가지 메모를 추가하기로 결정!

당신의 XML 형식이 비슷합니다 경우

: http://www.w3schools.com/dom/books.xml

당신은 다음과 같은 라인 저자 nodeValue를 액세스 할 수 있습니다.

markers = xml.documentElement.getElementsByTagName("book"); 

for (var i = 0; i < markers.length; i++) { 
    authors = markers[i].getElementsByTagName('author')[0].innerHTML; 
} 

은 미갈을 사람 :