Javascript GoogleMaps API:如何将geoJSON属性与infobox中的静态文本连接起来?

Javascript GoogleMaps API:如何将geoJSON属性与infobox中的静态文本连接起来?,javascript,json,google-maps-api-3,geojson,Javascript,Json,Google Maps Api 3,Geojson,我有一个GoogleMaps页面,我在其中加载geoJSON点。这些geoJSON点有一个名为“水位”的属性,当光标位于该点上方时,我希望在信息框中显示该属性 我目前可以得到信息框更新其“文本”的基础上水位属性的每个点没有问题。我的问题是,我希望信息框显示“水位=#”,而不仅仅是“#” 我试着在主体的信息框div内制作一个div标签,上面写着静态文本“Water Level=”。问题是,它仅在地图最初加载时显示。只要我将鼠标移到任何一点上,整个文本就会被a#(水位属性的大小)替换 如何将“Wat

我有一个GoogleMaps页面,我在其中加载geoJSON点。这些geoJSON点有一个名为“水位”的属性,当光标位于该点上方时,我希望在信息框中显示该属性

我目前可以得到信息框更新其“文本”的基础上水位属性的每个点没有问题。我的问题是,我希望信息框显示“水位=#”,而不仅仅是“#”

我试着在主体的信息框div内制作一个div标签,上面写着静态文本“Water Level=”。问题是,它仅在地图最初加载时显示。只要我将鼠标移到任何一点上,整个文本就会被a#(水位属性的大小)替换

如何将“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>
//获取geoJSON点及其属性
var script=document.createElement('script');
script.setAttribute('src',
'http://127.0.0.1:8000/geojson.json');
document.getElementsByTagName('head')[0].appendChild(脚本);
//为每个点设置鼠标悬停事件
map.data.addListener('mouseover',函数(事件){
document.getElementById('info-box').textContent=
event.feature.getProperty(“水位”);
});
//在代码的后面
水位=?

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

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

您的GeoJSON看起来像什么?我们无法访问127.0.0.1(您机器上的本地主机)。我深表歉意。这是我描述的图片。加载时,它是正确的,但当我通过将鼠标悬停在节点上拉动属性“水位”时,它会立即删除静态文本“Water Level=”。寻求调试帮助的问题(“为什么这段代码不起作用?”)必须包括所需的行为、特定的问题或错误以及在问题本身中重现它所需的最短代码。哇,我现在觉得自己很蠢。我早些时候试过,但用了双引号。谢谢你的启发,我在这件事上有些挠头。你一定是做错了别的事,因为不管你用双引号还是单引号,这都是你的偏好。我总是使用单引号,因为这样在使用HTML作为字符串时就不必转义双引号:
var str=''
vs
var str=“”
关于这个主题的更多信息: