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

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

本文关键字：静态 文本 起来 连接 信息 API 属性 geoJSON GoogleMaps      更新时间：2023-09-26

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

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

我试着在正文的信息框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>

您可以使用加号+字符连接字符串和变量，请尝试以下操作：

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

工作小提琴

相关文章：