从另一个API调用谷歌地图信息窗口

Google Maps Info Window calling from another API

本文关键字：信息 信息窗 窗口 谷歌地图 调用 另一个 API      更新时间：2023-09-26

我试图把信息窗口在谷歌地图页面。我正在使用API来调用数据，也使用markercluster .js插件。我已经看到如何使用JSON对象或如果标记在JavaScript文档中，但我不明白如何将其应用于从另一个API调用。

我做错了什么?你能解释一下吗?

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>API Test</title>
    <!--jQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<!--CSS-->
<link href="style.css" rel="stylesheet" type="text/css">
<!--JavaScript-->
<script src="script.js" type="text/javascript">
</script>
<script src="markerclusterer.js" type="text/javascript">
</script>
</head>
<body>
    <div class="container">
        <br>
        <div id="content">
            <br>
            <div id="googleMap"></div><br>
            <footer id="footer">
                <p>Footer</p>
            </footer>
        </div>
    </div>
</body>
</html>
CSS: 

#content {
    box-shadow: 5px 5px 10px 5px black;
}
#googleMap {
    height: 400px;
    width: 100%;
    border: 1px solid black;
}
JavaScript: 

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers = [];
$(document).ready(function() {
    //Construct the query string
    url ='https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?';
    + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';
    function initialize() {
            var mapProp = {
                center: new google.maps.LatLng(39.287346, -76.964306),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            map = new google.maps.Map(document.getElementById(
                "googleMap"), mapProp);
            var infowindow = new google.maps.InfoWindow({
                content: "Hello World!"
            });
            google.maps.event.addListener(markers, 'click', function() {
                console.log("hello world")
                infowindow.open(map, Markers);
            });
        }
        //google.maps.event.addDomListener(window, 'load', initialize);
    initialize();
    //Retrieve our data and plot it
    $.getJSON(url, function(data, textstatus) {
        $.each(data, function(i, entry) {
            //Cluster Markers
            for (var i = 0; i < 50; i++) {
                var entryMarkers = entry[i];
                var LatLng = new google.maps.LatLng(
                    parseFloat(entry.coordinates.latitude),
                    parseFloat(entry.coordinates.longitude)
                );
            }
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(
                    parseFloat(entry.coordinates
                        .latitude),
                    parseFloat(entry.coordinates
                        .longitude)),
                map: map,
                title: entry.file_name
            });
            markers.push(marker);
        });
        var markerCluster = new MarkerClusterer(map, markers);
    });
    //info windows
});

这是无效的:

google.maps.event.addListener(markers, 'click', function() {
    console.log("hello world")
    infowindow.open(map, Markers);
});

事件监听器不能在数组上工作，需要单独添加到(它所应用的)每个标记。

您可以使用函数闭包将infowindow与标记相关联(下面的示例使用createMarker函数)，并使infowindow全局。请注意，您没有来使用函数闭包——还有其他方法可以解决这个问题。下面的示例放置条目。File_name到infowindow

工作小提琴

代码片段:

var map;
var MarkerClusterer;
var marker;
var mcOptions;
var markers = [];
var infowindow = new google.maps.InfoWindow({
  content: "Hello World!"
});
$(document).ready(function() {
  //Construct the query string
  url = 'https://opendata.howardcountymd.gov/resource/2rmt-d3f4.json?' + '$$app_token=3bEFB0E09z1w6zaJfAb6QqLsX';
  function initialize() {
      var mapProp = {
        center: new google.maps.LatLng(39.287346, -76.964306),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.TERRAIN
      };
      map = new google.maps.Map(document.getElementById(
        "googleMap"), mapProp);
    }
    //google.maps.event.addDomListener(window, 'load', initialize);
  initialize();
  //Retrieve our data and plot it
  $.getJSON(url, function(data, textstatus) {
    $.each(data, function(i, entry) {
      createMarker(entry);
    });
    var markerCluster = new MarkerClusterer(map, markers);
  });
  //info windows
});
function createMarker(entry) {
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(
      parseFloat(entry.coordinates.latitude),
      parseFloat(entry.coordinates.longitude)),
    map: map,
    title: entry.file_name
  });
  markers.push(marker);
  google.maps.event.addListener(marker, 'click', function() {
    console.log("hello world");
    infowindow.setContent(entry.file_name + "<br>" + marker.getPosition().toUrlValue(6));
    infowindow.open(map, marker);
  });
}
#input-area {
  width: 100%;
  border: 1px solid black;
}
#googleMap {
  height: 400px;
  width: 100%;
}
html,
body {
  height: 100%;
  width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@07f15d84/markerclustererplus/src/markerclusterer.js"></script>
<!-- was https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
  <br>
  <div id="content">
    <br>
    <div id="googleMap"></div>
    <br>
    <footer id="footer">
      <p>Footer</p>
    </footer>
  </div>
</div>

相关文章：