Question

我正在尝试使用GoogleMaps API v3在许多标记内的infoBox上添加图像。

在尝试添加图像（省略指示的代码）之前，代码工作正常。

HTML页面上的和平Javascript代码：

function LoadMapa(value)
{    
var idInfoBoxAberto;
var infoBox = [];
function abrirInfoBox(id, marker) {
    if (typeof(idInfoBoxAberto) == 'number' && typeof(infoBox[idInfoBoxAberto]) == 'object') 
    {infoBox[idInfoBoxAberto].close();
    }
    infoBox[id].open(map, marker);
    idInfoBoxAberto = id;
    }
initialize(value);
function initialize(value) {
  var mapCanvas = document.getElementById('map_canvas');
  var mapOptions = {
     center: new google.maps.LatLng(-3.7280,-38.5303),
     zoom: 12,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var latlngbounds = new google.maps.LatLngBounds();
    var markers = [];
    //BUILDING MARKERS
    $.each(value, function(i,e) {
     marker = new google.maps.Marker({
            map: map,
            draggable: true,
            position: new google.maps.LatLng(new Number(e.latitude), new Number(e.longitude)),
            title: e.nome_posto_saude,
             visible: true
        }),
        boxText = document.createElement("div"),
        //these are the options for all infoboxes
        myOptions = {
            content: boxText,
            disableAutoPan: false,
            maxWidth: 0,
            pixelOffset: new google.maps.Size(-140, 0),
            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: "280px"
            },
            closeBoxMargin: "12px 4px 2px 2px",
            closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
            infoBoxClearance: new google.maps.Size(1, 1),
            isHidden: false,
            pane: "floatPane",
            enableEventPropagation: false
        };
        //define the text and style for all infoboxes
        boxText.style.cssText = " border: 1px solid black; margin-top: 8px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
        //TEXT BOX CUSTOMIZATION            
        var BoxElements = "<h3  font-weight: bold; text-align:center;>"+e.nome_posto_saude + "</h3><br>" + "Resposta 1:"+e.lista_respostas[0] + "<br>" + "resposta 2:"+e.lista_respostas[1]+ "<br>" + "resposta 3:"+e.lista_respostas[2]+ "<br>" + "resposta 34:787878";
        var imagesElements = "";
//<------------------- IF I OMIT THIS PART BELOW ALL WORKS!!!!!! ------>            
      //OBTAINING IMAGES_pATH_LIST:
        var image_url = "get_images_path/"+e.id;
        var imagesLoaded = false;   
   $.getJSON(image_url,function(data1,innerData){
      for( var y=0; y<3;y++)
      {
        if(typeof data1[y] != "undefined")
         {
            imagesElements += "<img class=\"picture\" th:src=\"@{/image/"+data1[y]+"/}\" style=\"width: 5px; height: 5px;\"></img>";
          }
       }     
       boxText.innerHTML = BoxElements + imagesElements;
       alert(BoxElements + imagesElements);
            });
 //<--------------IF I OMIT THIS PART ABOVE ALL WORKS! ----------_> 
     boxText.innerHTML = BoxElements + imagesElements;
     infoBox[new Number(e.id)] = new InfoBox(myOptions);
     infoBox[new Number(e.id)].marker = marker;
     var ib = new InfoBox(myOptions);
     google.maps.event.addListener(marker, "click", function (e) {
     boxText.innerHTML = BoxElements + imagesElements;
     ib.open(map, this);  // change the map variable appropriately
    });
  markers.push(marker);
  latlngbounds.extend(marker.position);
 });
   var markerCluster = new MarkerClusterer(map, markers);
   map.fitBounds(latlngbounds);
  }
 google.maps.event.addDomListener(window, 'load', initialize);
}

因此，省略用于添加图像的指示代码，当我点击标记时HTML页面会显示如下内容：

All the info is displaying OK

如果我添加这个代码的安静，我将getJSON获取每个标记的image_path，我将使用innerHTML和imagesElements代码添加这些图像：

//TEXT BOX CUSTOMIZATION            
var BoxElements = "<h3  font-weight: bold; text-align:center;>"+e.nome_posto_saude + "    </h3><br>" + "Resposta 1:"+e.lista_respostas[0] + "<br>" + "resposta 2:"+e.lista_respostas[1]+ "<br>" + "resposta 3:"+e.lista_respostas[2]+ "<br>" + "resposta 34:787878";
var imagesElements = "";

//OBTAINING IMAGES_pATH_LIST:
var image_url = "get_images_path/"+e.id;
var imagesLoaded = false;   
$.getJSON(image_url,function(data1,innerData){
    for( var y=0; y<3;y++) {
        if(typeof data1[y] != "undefined") {
            imagesElements += "<img class=\"picture\" th:src=\"@{/image/"+data1[y]+"/}\" style=\"width: 5px; height: 5px;\"></img>";
        }
    }   

    boxText.innerHTML = BoxElements + imagesElements;
    alert(BoxElements + imagesElements);
});
}

此警告向我显示imagesElements代码是正确的（获取图像源的getJSON由getJSON接收，但是没有显示图像，我的Spring服务器也没有收到任何请求）。

注意：我正在使用Thymeleaf，但我已使用HTML <img>代码进行了测试，但它无法正常工作：

imagesElements += "<img class=\"picture\" src=\"@/image/"+data1[y]+"/\" style=\"width: 5px; height: 5px;\"></img>";

哪个是我的错？也许InfoBox不支持里面的图像？

谢谢

Answer 1

我不知道getJSON是异步工作的，所以为了解决这个问题，我必须将所有代码放在getJSON中。

在GoogleMaps API v3 InfoBox上添加图片时出错

1 个答案: