將圖像添加到XML文件並解析它在Google Maps API v3上

我試圖將一個類別「圖像」添加到帶有標記的XML文件中，該標記使用側邊欄在Google地圖上呈現。的XML具有這種結構將圖像添加到XML文件並解析它在Google Maps API v3上

marker lat="0" lng="0" html="text" label="sidebar label" image="image.jpg"

我想是添加到側邊欄標籤，下到每一個文本輸入，圖像，它的來源是通過在XML領域的「形象」來定義。

此外，我們希望此圖像出現在地圖的氣泡上。以下是我們的代碼。我不是專家，我所有的測試都失敗了。

我將不勝感激對此的任何建議或建議。謝謝！

<script type="text/javascript"> 
//<![CDATA[ 
    var side_bar_html = ""; 
    var gmarkers = []; 
    var map = null; 

function createMarker(latlng, name, html) { 
var contentString = html; 
var marker = new google.maps.Marker({ 
    icon: 'monumento.png', 
    position: latlng, 
    map: map, 
    zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map,marker); 
    }); 

gmarkers.push(marker); 
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>'; 

} 

function myclick(i) { 
google.maps.event.trigger(gmarkers[i], "click"); 
} 

function initialize() { 
var myOptions = { 
zoom: 17, 
center: new google.maps.LatLng(25.777557,-80.15065), 
mapTypeControl: true, 
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
navigationControl: true, 
mapTypeId: google.maps.MapTypeId.SATELLITE 
} 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
google.maps.event.addListener(map, 'click', function() { 
    infowindow.close(); 
    }); 

    downloadUrl("casas_famosos.xml", function(doc) { 
    var xmlDoc = xmlParse(doc); 
    var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker  
     var lat = parseFloat(markers[i].getAttribute("lat")); 
     var lng = parseFloat(markers[i].getAttribute("lng")); 
     var point = new google.maps.LatLng(lat,lng); 
     var html = markers[i].getAttribute("html"); 
     var label = markers[i].getAttribute("label");  
     var marker = createMarker(point,label,html); 
    } 
    document.getElementById("side_bar").innerHTML = side_bar_html; 
    }); 
} 
var infowindow = new google.maps.InfoWindow(
{ 
size: new google.maps.Size(150,50) 

}); 
//]]> 
</script>

來源

2011-05-26 nautilia

問題中描述的「XML」結構不是XML。很難知道這裏發生了什麼。 – Trott 2011-05-26 22:08:58

您可以發佈casas_famosos.xml的內容，或者至少從中摘錄它的內容嗎？如果問題出現在XML文件中，則可能難以或僅根據您的代碼進行分析。 – Trott 2011-05-27 05:38:55

對不起，我試圖讓它更簡單。謝謝你的回答。這是XML： ' <標記LAT = 「12.77」 LNG = 「1.15」 HTML = 「餐廳在沙灘上」的標籤= 「餐廳」 imagen畫質= 「restaurant_beach_thumbnail.jpg」/> ' – nautilia 2011-05-27 14:37:56

您可以從XML獲得圖像，當你得到所有其他的XML屬性，然後將其添加到顯示在信息窗口的HTML，像這樣：

function createMarker(latlng, name, html, image) { 
    var contentString = image + html; 
    var marker = new google.maps.Marker({ 
     icon: 'monumento.png', 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
    }); 

    gmarkers.push(marker); 
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + image + name + '<\/a><br>'; 
} 

... 

downloadUrl("casas_famosos.xml", function(doc) { 
    var xmlDoc = xmlParse(doc); 
    var markers = xmlDoc.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     // obtain the attribues of each marker  
     var lat = parseFloat(markers[i].getAttribute("lat")); 
     var lng = parseFloat(markers[i].getAttribute("lng")); 
     var point = new google.maps.LatLng(lat,lng); 
     var html = markers[i].getAttribute("html"); 
     var label = markers[i].getAttribute("label"); 
     var image = '<img src="'+markers[i].getAttribute("image")+'" alt=""/>';  
     var marker = createMarker(point,label,html,image); 
    }

注意，我假設圖像與HTML位於同一目錄中。如果不是，則必須適當調整生成的img標記。

來源

2011-05-27 16:39:57 Trott

謝謝，特羅特！有用。如果可能，還有一個問題。我怎樣才能將這個相同的圖像添加到側邊欄項目？ – nautilia 2011-05-27 21:02:52

我編輯了我的答案以做到這一點。 – Trott 2011-05-27 22:23:10

特洛特，非常感謝您的幫助！這非常有用。 – nautilia 2011-05-30 10:56:56

將圖像添加到XML文件並解析它在Google Maps API v3上

回答

相關問題