代码之家 › 专栏 › 技术社区 › David

此url是如何用“+”img\u url+”形成的?

character url image html javascript

-1

David · 技术社区 · 8 年前

下面是一段简单代码的一部分,用于在谷歌地图中显示位置(使用静态图像)。

这里没有错误,我只是想解释一下代码 <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+"'>";
}

1 回复 | 直到 8 年前

Jay A. Little 8 年前

+ 作为字符串运算符,将字符串连接(添加)在一起。

例子:
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";
这需要新的 拉特隆 变量并将其插入googleapis url以完成url,并将此完整url另存为 img_url .

document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
最后,此行找到id为“mapholder”的元素,并将其内容更改为 <img src=''> 同时,在 src公司 单引号。

现在来解释这条线: "<img src='"+img_url+"'>"

第一个 " 打开字符串并用开始图像标记 <img src=' ,此时需要插入完整的url。
然后用第二个 " 然后使用 + 添加变量的步骤 img\U url ,
但图像标记尚未完成,请使用另一个 + 要在url之后添加其他内容,url是另一个字符串,请使用打开另一个字符串 " 并使用完成图像标记 '> 最后用最后一个 " .