Добавьте изображение в файл XML и проанализируйте его в Google Maps API v3

Question

Я пытаюсь добавить категорию "изображение" в файл XML с маркерами, которые отображаются на карте Google с боковой панелью.XML имеет такую ​​структуру

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

. Я хочу добавить к метке боковой панели рядом с каждой текстовой записью изображение, источник которого определяется полем «изображение» в XML.1004 *

Также мы хотим, чтобы это изображение появилось на карте.Ниже приведен код, который мы имеем.Я не эксперт, и все мои тесты провалились.

Буду благодарен за любые предложения или советы по этому вопросу.Спасибо!

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

Answer 1

Вы можете получить изображение из 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.