从另一个 API 调用的 Google 地图信息窗口

Question

我正在尝试为 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 放入信息窗口。

工作小提琴

代码片段：

 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>

从另一个 API 调用的 Google 地图信息窗口

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-10-17 18:46:40

从另一个 API 调用的 Google 地图信息窗口

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-10-17 18:46:40

解决方案1
1 已采纳 2015-10-17 18:46:40