Question

以下是用于在Google地图中显示位置的简单代码的一部分（使用静态图片）。

此处没有错误，我只想解释代码<img src='+img_url+'>

我无法弄清楚<img> src的网址是如何组成的。

我认为img_url完好无损，但+在这里的用途是什么？

为什么这里需要'"？

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

Answer 1

+作为字符串运算符将字符串连接（添加）在一起。

例如：
var name = "David"和var string = "Hello "+name
string将打印为"Hello David"

所以我创建了一个包含字符串的变量，然后将该变量添加到另一个字符串中。（串联）

HTML图片代码需要像这样结束：<img src='www.example.com/image.jpg'>
（请注意单引号，可能是双引号，但在您的示例中它使用单引号）

此处JavaScript正在构建要插入src属性的图片网址。

var latlon = position.coords.latitude + "," + position.coords.longitude;
这需要两个变量（lat和long）并将它们放入一个字符串中并在它们之间插入逗号。这一个字符串成为自己的变量latlon。

var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
这会获取新的latlon变量，并将其插入googleapis网址以完成网址，并将此完整网址保存为img_url。

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
最后，该行找到id为“mapholder”的元素，并将其内容更改为<img src=''>，同时在src单引号内插入完整的url。

现在解释这一行："<img src='"+img_url+"'>"

第一个"打开字符串并使用<img src='启动图片代码，此时我们需要插入完整的网址。
然后使用第二个"关闭字符串，然后使用+添加变量img_url，
但是图片代码尚未完成，请使用其他+在网址后添加其他内容，这是另一个字符串，因此打开另一个字符串"并使用'>完成图片代码，最后用最后一个"关闭字符串。

这个网址是如何用“+ + img_url +”形成的？

1 个答案: