Google 地图信息 Window 来自另一个 API

Question

我正在尝试将信息 windows 放入 Google 地图页面。我正在使用 API 调用数据并使用 markerclusterer.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
});

Answer 1

这是无效的：

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

事件侦听器不适用于数组，需要单独添加到（它适用的）每个标记。

您可以使用函数闭包将信息窗口关联到标记（下面的示例使用 createMarker 函数）并使信息窗口成为全局窗口。请注意，您没有使用函数闭包还有其他方法可以解决此问题。下面的示例将 entry.file_name 放入信息窗口。

working fiddle

代码片段：

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"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<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>

Google 地图信息 Window 来自另一个 API

Google Maps Info Window calling from another API

javascript

jquery

google-maps

infowindow