Açık infowindow (V3)

Question

Bu sorunu gidermek başımı almak gibi olamaz

oluşturulan bir XML dosyasından. Haritanın altında, haritada görüntülenen tüm şirketlerin (JavaScript içermeyen) bir listesini göstermek istiyorum. Listedeki bir şirketi tıkladığımda, harita o işaretçiyi işaret eder ve bir infoWindow açar. Mesele şu ki, harita ve listenin iki ayrı şey olmasını istiyorum ...

Bu sorunun üstesinden gelmenin doğru yolu ne olurdu? Teşekkürler! Benim konsol bana markers[index].getPosition is not a function söyler ve benim listedeki ilk öğe gösterir: Önemli

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

, ben aşağıdaki denedim Michal önerilerini takiben, ancak iki sorunlarla karşılaşıyor ediyorum ... tüm markerinfo dinamik olmasıdır undefined olmalıdır. Lütfen yardım edebilir misin?

//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(){ 
} 

Answer 1

Doğru yoldasın. Sadece Marker nesneleriniz için ayrı bir global dizi oluşturmanız ve oluşturulan tüm işaretleyicileri bu diziye uygulamanız yeterlidir. Tüm şirket verilerinizi html'ye yazdığınızda, tıklamayla çalıştırılan işaretçinin dizinine sahip bir çağrı dahildir. Aşağıda bir örnek kod bulunmaktadır. Ben XML yerine şirket bilgilerini tutmak için veri yapı olarak JSON kullandım.

Tamam

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

Sana başka bir çözüm eklendi - kodunuzu uising. Bu, bilgi penceresini açmak ve işaretçiye gitmek için DOM (HTML) tıklama etkinliğini bağlamak için bindInfWindow işlevinizi kullanır. Şirketleri dinamik olarak yüklediğiniz için, adlarını ve kimliklerini barındıran div'lar (veya başka etiketler) DOM'a, siz de bunu etkinliklere bağlamaya başlamadan ÖNCE mevcut olmalıdır. Bu nedenle, yürütmeniz gereken ilk işlev, şirketleri oluşturan ilk işlevdir. HTML (harita başlangıcı değil). ben bu cevabı kaldıramazsınız çünkü .. Ben senin veri yoksa ben bunu test değil

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

Answer 2

unutmayın, bazı notlar eklemek için karar!

xml biçimi buna benzer ise

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

aşağıdaki çizgilerle yazar NodeValue erişebilir.

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

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

o, Michal birisi :)