change Bildquelle mit JavaScript Funktion funktioniert nicht

Question

Ich möchte vollständig statische Bilder von Satellitenkarte anzeigen.

Zum Beispiel muss ich 5 statische Bilder anzeigen, wo nur Längen- und Breitengrad definiert ist.

Ich habe es wie dieses Jsfiddle

ich es statische Karte API tat.

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

Aber ich muss es ändern, weil diese Bilder auf eine dynamische Weise erscheinen sollten. Aus bestimmten Gründen wird die JavaScript-Funktion nicht ausgeführt. Hilf mir!

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

Der HTML-Code:

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

Kann mir jemand bitte helfen, wie kann ich das am besten erreichen?

Answer 1

Sie weisen die Bildquelle div statt img zu. Außerdem wurde ein Syntaxfehler behoben.

1. var imageSource ist eine Zeichenfolge und sollte mit " enden. Daher aktualisiert =satellite zu =satellite";.
2. Es gab ein Komma fehlt vor NY&zoom. So aktualisiert NY&zoom zu ,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" />