Google Maps API：如何将 geoJSON 属性与信息框中的静态文本连接起来？答案

【问题标题】：GoogleMaps API: How to concatenate geoJSON properties with static text in infobox?Google Maps API：如何将 geoJSON 属性与信息框中的静态文本连接起来？
【发布时间】：2015-02-10 21:15:42
【问题描述】：

我有一个 GoogleMaps 页面，我将 geoJSON 点加载到其中。这些 geoJSON 点有一个名为“水位”的属性，当光标位于该点顶部时，我想在信息框中显示该属性。

我目前可以让信息框根据每个点的水位属性更新其“文本”没有问题。我遇到的问题是我希望信息框显示“水位 = #”，而不仅仅是“#”。

我尝试在正文的信息框 div 内制作一个 div 标签，上面写着静态文本“水位 =”。问题是它只会在地图最初加载时显示。只要我将鼠标悬停在任何一点上，整个文本就会被替换为 #（水位属性的大小）。

如何将“水位 =”字符串与 geoJSON 属性连接起来？

这是我的代码：

//Grab the geoJSON points and their properties
var script = document.createElement('script');
script.setAttribute('src',
    'http://127.0.0.1:8000/geojson.json');
document.getElementsByTagName('head')[0].appendChild(script);

// Set mouseover event for each Point
map.data.addListener('mouseover', function(event) {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('waterlevel');
});



//MUCH LATER IN THE CODE
    <body>
       <div id="map-canvas"></div>
       <div id="info-box"><div style="overflow:hidden;line-height:1.35;min-width:200px;"><b>Water Level = </b></div>?</div>
    </body>

【问题讨论】：

您的 GeoJSON 是什么样的？我们无法访问 127.0.0.1（您机器上的本地主机）。
我很抱歉。 pastebin.com/npeRRC6m 这是我描述的图片。加载时它是正确的，但只要我通过将鼠标悬停在节点上拉动属性水位，它就会删除静态文本“水位 =”。 imgur.com/a/fG8EY
寻求调试帮助的问题（“为什么这段代码不起作用？”）必须在问题本身中包含所需的行为、特定问题或错误以及重现它所需的最短代码。请参阅：How to create a Minimal, Complete, and Verifiable example。

标签： javascript json google-maps-api-3 geojson

【解决方案1】：

您可以使用加号+ 字符连接字符串和变量，试试这个：

map.data.addListener('mouseover', function(event) {
    var waterlevel = event.feature.getProperty('waterlevel');
    document.getElementById('info-box').textContent = 'Waterlevel = ' + waterlevel;
});

working fiddle

【讨论】：

哇，我现在觉得自己很蠢。我之前尝试过，但使用双引号。感谢您的启发，在这个问题上摸不着头脑。
您一定是做错了什么，因为使用双引号或单引号并不重要，这是一个偏好问题。我总是使用单引号，因为这样我在使用 HTML 作为字符串时不必转义双引号：var str = '<a href="url">link</a>' 与 var str = "<a href=\"url\">link</a>" 以下是有关该主题的更多信息：stackoverflow.com/questions/242813/…