Question

我想从卫星地图中显示完全静态的图像。

例如，我需要显示5个静态图像，其中只定义了纬度和经度。

我这样做Jsfiddle

我是使用静态地图API完成的。

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

您要将图片来源分配到div而不是img。还修复了一些语法错误。

var imageSource是一个字符串，应以"结尾。因此更新了=satellite到=satellite";。
NY&zoom之前有一个逗号丢失。已更新NY&zoom至,NY&zoom。

Updated Fiddle

＆＃13;

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

＆＃13;

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

＆＃13;

用javascript函数更改图像源不起作用

1 个答案: