자바 스크립트 기능을 사용하는 이미지 소스가 변경되지 않습니다.

Question

위성지도에서 완전히 정적 인 이미지를 표시하고 싶습니다.

예를 들어 위도와 경도 만 정의 된 5 개의 정적 이미지를 표시해야합니다.

나는 정적지도 API를 사용했다이 Jsfiddle

처럼했다.

Example: 
<img src="http://maps.google.com/maps/api/staticmap?center=20.1,20.1,NY&zoom=18&size=200x200&maptype=satellite"/> 

하지만 이미지를 동적으로 표시해야하므로 이미지를 변경해야합니다. 몇 가지 이유로 javascript 함수가 실행되지 않습니다. 도와주세요!

function addImageSource(number,lat, lon) { 
var imageSource = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lon + ",NY&zoom=18&size=200x200&maptype=satellite"; 
$("#item" + number).attr("src", imageSource); 
} 

addImageSource(1,20.123456, 21.123456); 
addImageSource(2,21.123456, 21.123456); 
addImageSource(3,22.123456, 21.123456); 
addImageSource(4,23.123456, 21.123456); 
addImageSource(5,24.123456, 21.123456); 
addImageSource(6,25.123456, 21.123456); 

HTML 코드 :

는

<div id='item1'> <img/> </div> 
<div id='item2'> <img/> </div> 
<div id='item3'> <img/> </div> 
<div id='item4'> <img/> </div> 
<div id='item5'> <img/> </div> 
<div id='item6'> <img/> </div> 

누군가가 제발 도와 드릴까요, 어떻게 최선의 방법으로 이것을 달성 할 수 있습니까?

Answer 1

이미지 소스를 img 대신 div으로 지정합니다. 또한 일부 구문 오류가 수정되었습니다.

1. var imageSource은 문자열이며 "으로 끝나야합니다. 따라서 =satellite에서 =satellite";으로 업데이트되었습니다.
2. NY&zoom 앞에 쉼표가 없습니다. 따라서 NY&zoom에서 ,NY&zoom으로 업데이트되었습니다.

Updated Fiddle.

function addImageSource(number, lat, lon) { 
 
    var imageSource = "http://maps.google.com/maps/api/staticmap?center=" + lat + "," + lon + ",NY&zoom=18&size=200x200&maptype=satellite"; 
 
    $("#item" + number + " img").attr("src", imageSource); 
 
} 
 

 
addImageSource(1, 20.123456, 21.123456); 
 
addImageSource(2, 21.123456, 21.123456); 
 
addImageSource(3, 22.123456, 21.123456); 
 
addImageSource(4, 23.123456, 21.123456); 
 
addImageSource(5, 24.123456, 21.123456); 
 
addImageSource(6, 25.123456, 21.123456);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id='item1'> <img/> </div> 
 
<div id='item2'> <img/> </div> 
 
<div id='item3'> <img/> </div> 
 
<div id='item4'> <img/> </div> 
 
<div id='item5'> <img/> </div> 
 
<div id='item6'> <img/> </div> 
 

 
<br/> 
 
Example: 
 
<br> 
 
<img src="http://maps.google.com/maps/api/staticmap?center=20.123456.1,21.123456,NY&zoom=18&size=200x200&maptype=satellite" />