Javascript 如何使用JSON文件中的内容填充GoogleMapsAPI信息窗口_Javascript_Json_Api_Google Maps_Google Maps Api 3

Javascript 如何使用JSON文件中的内容填充GoogleMapsAPI信息窗口

javascript json api google-maps google-maps-api-3

Javascript 如何使用JSON文件中的内容填充GoogleMapsAPI信息窗口,javascript,json,api,google-maps,google-maps-api-3,Javascript,Json,Api,Google Maps,Google Maps Api 3,我已经搜索了论坛（无休止地）尝试了我发现的一切，但没有任何效果。我有以下代码。我希望能够单击其中一个标记，并拥有一个InfoWindow弹出窗口，其中包含从相应JSON派生的唯一内容，以便该窗口具有位置、日期时间和详细信息，并且我可以使用不同的html/css将它们作为目标。什么都不管用。有什么帮助吗 <head> <title>Data Layer: Simple</title> <meta name="viewport" content="initi

我已经搜索了论坛（无休止地）尝试了我发现的一切，但没有任何效果。我有以下代码。我希望能够单击其中一个标记，并拥有一个InfoWindow弹出窗口，其中包含从相应JSON派生的唯一内容，以便该窗口具有位置、日期时间和详细信息，并且我可以使用不同的html/css将它们作为目标。什么都不管用。有什么帮助吗

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

HTML

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

JAVASCRIPT

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

  var ufomap;
  var infowindow = new google.maps.InfoWindow();

function initMap() {
        ufomap = new google.maps.Map(document.getElementById('mymap'), {
          zoom: 4,
          center: {lat:37.0902,lng:-95.7129}
        });

        ufomap.data.loadGeoJson('json.geojson');

        }

JSON

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

您的GeoJSON无效（JavaScript控制台中报告了错误）。运行它并修复所有错误（或修复JavaScript控制台中报告的错误）。您发布的内容已修复：

如果我将If设置为valid，并使用相关问题中的代码：，它会起作用（但稍微调整InfoWindow的pixelOffset会使它更好）

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

工作代码片段：

<head>
<title>Data Layer: Simple</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="mymap"></div>

<script type="text/javascript" src="script.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=REDACTED&callback=initMap">
</script>

</body>

</html>

var-ufomap；
函数initMap（）{
ufomap=new google.maps.Map（document.getElementById（'mymap'）{
缩放：4，
中心：{
纬度：37.0902，
液化天然气：-95.7129
}
});
var infowindow=new google.maps.infowindow（）；
//ufomap.data.loadGeoJson（'json.geojson'）；
ufomap.data.addGeoJson（geoJson）；
ufomap.data.addListener（'click'，函数（事件）{
console.log（事件）；
//位置、日期时间和详细信息
让location=event.feature.getProperty（'location'）；
让datetime=event.feature.getProperty（'Date-Time'）；
let details=event.feature.getProperty（'details'）；
让html=位置+“
”+日期时间+“
”+详细信息；
setContent（html）；//在infowindow中显示html变量
infowindow.setPosition（event.latLng）；
infowindow.setOptions({
pixelOffset:new google.maps.Size（0，-42）
})；//将信息窗口向上移动42像素到默认标记图标的顶部
信息窗口打开（ufomap）；
});
}
var geoJson={
“类型”：“FeatureCollection”，
“特点”：[{
“类型”：“功能”，
“财产”：{
“地点”：“宾夕法尼亚州格林斯堡”，
“日期时间”：“1969-01-01T10:00:00”，
“形状”：“圆形”，
“详细信息”：“当我2到4岁的时候，可能与访客有过接触”，
“纬度”：“40.33569572”，
“经度”：“-79.55026848”
},
“几何学”：{
“类型”：“点”，
“坐标”：[-79.550268，
40.335696
]
}
},
{
“类型”：“功能”，
“财产”：{
“地点”：“宾夕法尼亚州史密斯镇”，
“日期时间”：“1979-01-01T10:00:00”，
“形状”：“正方形”，
“细节”：“明亮的灯光闪烁”，
“纬度”：“44.33569572”，
“经度”：“-78.55026848”
},
“几何学”：{
“类型”：“点”，
“坐标”：[-78.550268，
44.335696
]
}
}
]
}

#我的地图{
身高：100%；
}
html，
身体{
身高：100%；
保证金：0；
填充：0；
}