2017-04-16 6 views
-2

Google지도 API (JavaScript)로 작은 웹 앱을 만들고 있는데, 앱에서 위도와 경도)는 다른 정보 ... I에 대한이 코드가 속으로 : 콘솔에서Google지도 API (JS) InfoWindow에 이미지가 표시되는 문제 (html <img> 태그)

for (i = 0; i < locations.length; i++) { 
    var coords = new google.maps.LatLng(Number(locations[i][1]), Number(locations[i][2])) 
    marker = new google.maps.Marker({ 
     position: coords, 
     map: map 
    }); 

    var iwcontent="<a href='app.php?id="+locations[i][3]+"' target='_blank'><h4><img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'> "+locations[i][0]+"</h4></a>"; 
    console.log(iwcontent); 
    bounds.extend(coords); 
    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
     infowindow.setContent(iwcontent); 
     infowindow.open(map, marker); 
     } 
    })(marker, i)); 
    } 

내가 올바른 HTML 구조 (이럴을받을), 같은 :

<a href='app.php?id=ABCD-J2WZSW' target='_blank'><h4><img='images/icons/ABCD-J2WZSW/logo.jpg' class='minilogo'> ABCD, 33.</h4></a> 

in4b :를 파일 images/icons/ABCD-J2WZSW/logo.jpg이 있고파일클래스에 고정 된 (보이는) width CSS 값이 있습니다.

문제/문제는 : 이미지가 보이지 않습니다!

재미있는 : 내가 정보창을 "검사"하면, 나는 다음 볼 수 있습니다

<a href="app.php?id=ABCD-J2WZSW" target="_blank"><h4><img='images icons="" abcd-j2wzsw="" logo.jpg'="" class="minilogo"> ABCD, 33.</img='images></h4></a> 

주의 사항 :

  1. 을 태그가 완전히 엉망입니다!
  2. 태그에서 id 값은 소문자입니다.

왜 이런 일이 발생합니까? 어떻게 해결할 수 있습니까? 독서를 해주셔서 감사 드리며, 저의 영어 실력을 용서해주십시오!

+1

코드의 실제 피들을 제공 하시겠습니까? –

+0

은 해당 코드를 모두 복제하기가 복잡합니다 ... 문제와 코드 (DOM 검사 포함)도 설명했습니다. – candlejack

+0

모든 마커가 잘 설정되어 있고, 정보창에는 텍스트가 표시되지만 이미지는 표시되지 않습니다. 이상한 이유로 ''은 다음과 같이 표현됩니다 : '

답변

2

img 태그를 만드는 데 문제가 있습니다. 코드에서 img에 URL 값을 할당 할 수 없습니다.이 값은 src 속성에 할당됩니다. 여기에 img 태그 코드가 잘못된 형식 인 - <img='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'>이고, src 속성이 없으므로 전체 HTML 구조가 엉망입니다. 문제의주의를 기울여야한다

<img src='images/icons/"+locations[i][3]+"/logo.jpg' class='minilogo'> 

-

그것은해야합니다!

+0

haha, omg, 바보 같은 날. 나는 휴식이 필요하다고 생각해. – candlejack

+1

@candlejack 우리 모두 가끔 바보 같은 실수를 저질렀습니다. :) –