0

我知道我相當接近解決這個問題,我只是需要一點點正確的方向。我從包含標記位置和其他一些數據的數據庫中生成XML,這些數據應該在點擊時顯示在信息框中。我正確生成XML並正確繪製標記。我的問題在於信息框。我的信息框顯示放置的最後一個標記的數據。我創建了一個存儲一塊數據(NAME)的數組,但信息框仍然只顯示最後一個標記的信息。一旦我能弄清楚如何正確顯示NAME,我可以繼續爲其餘數據創建數組。這裏是我的代碼,以進一步解釋:解析XML中的信息框的多個地圖標記

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?  key=MY_KEY&sensor=true"></script> 
    <script type="text/javascript" src="infobox.js"></script> 
    <script type="text/javascript"> 

var mapstyle = [styles-removed-for-space] 

var icon = 'mapicon.png'; 

//<![CDATA[ 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(10,-10), 
    zoom: 3, 
    minZoom: 3, 
    disableDefaultUI: true, 
    styles: mapstyle, 
    mapTypeId: 'roadmap' 
    }); 

    var name = []; 

    downloadUrl("genxml.php", function(data) { 
    var xml = data.responseXML; 
    var places = xml.documentElement.getElementsByTagName("place"); 
    for (var x = 0; x < places.length; x++) { 
     var getname = places[x].getAttribute("name"); 
     name.push(getname); 
     var address = places[x].getAttribute("address"); 
     var point = new google.maps.LatLng(
      parseFloat(places[x].getAttribute("lat")), 
      parseFloat(places[x].getAttribute("lng"))); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon, 
     title: getname 
     }); 

     var boxText = document.createElement("div"); 
     boxText.id = "infobox" 
     boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;"; 
     boxText.innerHTML = name[x]; 

     var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-250, -173) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat" 
      ,opacity: 0.75 
      ,width: "500px" 
      ,height: "300px" 
      ,textAlign: "center" 
     } 
     ,closeBoxMargin: "13px 5px 0px 0px" 
     ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
     }; 

     var ib = new InfoBox(myOptions); 

     google.maps.event.addListener(marker, 'click', function(e) { 
     map.setZoom(13); 
     map.setCenter(this.getPosition()); 
     ib.open(map, this); 
     }); 

    } 

    }); 
} 

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> 

</head> 

    <body onload="load()"> 
     <div id="map" style="width:100%; height:100%"></div> 
    </body> 
</html> 

我相信我俯視一些簡單的東西。任何幫助,將不勝感激。非常感謝你。

+0

[傳遞XML標記,以谷歌地圖]的可能重複(http://stackoverflow.com/questions/9881326/passing-xml-markers-to-google-map) – geocodezip 2013-03-21 16:42:21

+0

解決這個問題的一個方法是函數關閉(如該文章中所示的創建標記函數) – geocodezip 2013-03-21 16:42:59

+0

感謝geocodezip。問題不在於創建標記或解析xml。信息框只顯示來自最後標記的數據。 – stokexx 2013-03-21 16:50:25

回答

1

未測試:

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
    <script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?  key=MY_KEY&sensor=true"></script> 
    <script type="text/javascript" src="infobox.js"></script> 
    <script type="text/javascript"> 

var mapstyle = [styles-removed-for-space] 

var icon = 'mapicon.png'; 

//<![CDATA[ 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(10,-10), 
    zoom: 3, 
    minZoom: 3, 
    disableDefaultUI: true, 
    styles: mapstyle, 
    mapTypeId: 'roadmap' 
    }); 

    var name = []; 

    downloadUrl("genxml.php", function(data) { 
    var xml = data.responseXML; 
    var places = xml.documentElement.getElementsByTagName("place"); 
    for (var x = 0; x < places.length; x++) { 
     var getname = places[x].getAttribute("name"); 
     name.push(getname); 
     var address = places[x].getAttribute("address"); 
     var point = new google.maps.LatLng(
      parseFloat(places[x].getAttribute("lat")), 
      parseFloat(places[x].getAttribute("lng"))); 
     createMarker(point, address, getname, name); 
    } 

    }); 
} 

function createMarker(point, address, getname, name) { 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon, 
     title: getname 
     }); 

     var boxText = document.createElement("div"); 
     boxText.id = "infobox" 
     boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;"; 
     boxText.innerHTML = name[x]; 

     var myOptions = { 
     content: boxText 
     ,disableAutoPan: false 
     ,maxWidth: 0 
     ,pixelOffset: new google.maps.Size(-250, -173) 
     ,zIndex: null 
     ,boxStyle: { 
      background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat" 
      ,opacity: 0.75 
      ,width: "500px" 
      ,height: "300px" 
      ,textAlign: "center" 
     } 
     ,closeBoxMargin: "13px 5px 0px 0px" 
     ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
     ,infoBoxClearance: new google.maps.Size(1, 1) 
     ,isHidden: false 
     ,pane: "floatPane" 
     ,enableEventPropagation: false 
     }; 

     var ib = new InfoBox(myOptions); 

     google.maps.event.addListener(marker, 'click', function(e) { 
     map.setZoom(13); 
     map.setCenter(this.getPosition()); 
     ib.open(map, this); 
     }); 
} 

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> 

</head> 

    <body onload="load()"> 
     <div id="map" style="width:100%; height:100%"></div> 
    </body> 
</html> 
+0

幾個小的變化,它的工作原理。非常感謝! – stokexx 2013-03-21 17:52:26

相關問題