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

Question

我有一个 GoogleMaps 页面，我在其中加载了 geoJSON 点。这些 geoJSON 点有一个名为 "waterlevel" 的属性，当光标位于该点上方时，我想将其显示在信息框中。

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

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

如何将 "Water Level = " 字符串与 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>

Answer 1

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

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

working fiddle

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

GoogleMaps API: How to concatenate geoJSON properties with static text in infobox?

javascript

json

google-maps-api-3

geojson