如何在Google Maps Api的数据层中添加信息窗口

Question

I have a problem with adding an info window to a data layer that has data from a geojson link. 将信息窗口添加到具有来自geojson链接的数据的数据层时遇到问题。 as my code below will show I can't seem to get the info window to pop-up. 如下面的代码所示，我似乎无法弹出信息窗口。

I have used the tutorial found on this site 我已经使用了本网站上的教程

here is my code, I hope you guys can help me. 这是我的代码，希望你们能帮助我。 if something is unclear don't hesitate to ask me! 如果有不清楚的地方，不要犹豫，问我！

    <title>Google Maps IKGEO</title>

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        #map {
            height: 100%;
        }
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: #4CAF50;
        }
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
        }
        li {
            float: left;
        }
        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover:not(.active) {
            background-color: #111;
        }
        .active {
            background-color: #4CAF50;
        }
        .footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #333;
            color: aliceblue;
            text-align: center;
        }
        #legend {
            font-family: Arial, sans-serif;
            background: #fff;
            padding: 25px;
            margin: 25px;
            border: 3px solid #000;
        }
        #legend h3 {
            margin-top: 0;
        }
        #legend img {
            vertical-align: middle;
        }
        #controls ul{
            background-color: white;
        }
    </style>
</head>

<body>
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li style="float:right"><a class="active" href="about.html">About</a></li>
    </ul>
    <div id="map"></div>
    <div id="legend">
        <h2>Legend</h2>
        <div id="controls">
            <ul>
                <il><input type="checkbox" id="data_layer1"></il><img src="Markers/parkinggarage.png"><h3>Parkeerplaats</h3>
                <il><input type="checkbox" id="data_layer2"></il><img src="Markers/supermarket.png"><h3>supermarkt</h3>
                <il><input type="checkbox" id="data_layer3"></il><img src="Markers/bicycle.png"><h3>fietsenstalling</h3>
                <il><input type="checkbox" id="data_layer4"></il><img src="Markers/kiosk.png"><h3>kiosk</h3>
            </ul>
        </div>
    </div>
    <script>

        var map;
        var checkbox1 = document.getElementById("data_layer1");
        var checkbox2 = document.getElementById("data_layer2");
        var checkbox3 = document.getElementById("data_layer3");
        var checkbox4 = document.getElementById("data_layer4");

        function initMap() {
            // centrum van de map wanneer deze geladen wordt met een zoom van 12
            var mapOptions = {
                center: {lat: 52.0704978, lng: 4.3006999000000405},
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                styles: [
                    {
                    stylers: [
                    { hue: '#fff300' },
                    { invert_lightness: true },
                    { saturation: -100  },
                    { lightness: 33 },
                    { gamma: 0.5 }
                    ]
                    }, {
                      featureType: 'poi.business',
                      elementType: ' labels.icon',
                      stylers: [
                        { visibility: 'on' },
                        { hue: '#fff300' },
                        { lightness: -15 },
                        { saturation: 99 }
                      ]
                    }, {
                      featureType: 'water',
                elementType: 'geometry',
                stylers: [
                    { color: '#456596' },
                    { lightness: 15 }
                      ]
                    }, {
                      featureType: 'transit.station.rail',
                      elementType: 'labels.text.stroke',
                      stylers: [
                      { visibility: 'on' },
                      { color: '#FF6666' }
                      ]
                    }, {
                      featureType: 'poi',
                      elementType: 'geometry',
                      stylers: [
                        { visibility: 'on' },
                        { lightness: -10 }
                      ]
                    }, {
                      featureType: 'road.local',
                      elementType: 'geometry.fill',
                      stylers: [
                        { visibility: 'on' },
                        { hue: '#FFF333' },
                        { lightness: 30 },
                        { saturation: 99 }
                      ]
                    }
                  ]
            };

            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            // variabelen om de datastyle aan te passen per geoJson file
            var data_layer1 = new google.maps.Data({map: map});
            var data_layer2 = new google.maps.Data({map: map});
            var data_layer3 = new google.maps.Data({map: map});
            var data_layer4 = new google.maps.Data({map: map});

            // dit is de wijkgrenzen data (geen style nodig)
            map.data.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/cc985cc50ff64b13b744ddaeec613cf9_1.geojson');

            // dit is de parkeercentrum data (Met de style atribuut)
            data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson');
            data_layer1.setStyle({
                icon: 'Markers/parkinggarage.png',
                title: 'parkeercentrums'
            });

            // supermarkten in omgeving Den Haag (Met de style atribuut)
            data_layer2.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/d94624fffb6049718469f6f361863f92_0.geojson');
            data_layer2.setStyle({
                icon: 'Markers/supermarket.png',
                title: 'supermarkt'
            });

            // fietsenstalling in omgeving Den Haag (Met de style atribuut)
            data_layer3.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/3ced9e81a5e048cebb989a64e12037b0_0.geojson');
            data_layer3.setStyle({
                icon: 'Markers/bicycle.png',
                title: 'fietsenstalling'
            });

            // kiosks en straat markten (Met de style atribuut)
            data_layer4.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/e070456a09a942acbee3927f30174114_5.geojson');
            data_layer4.setStyle({
                icon: 'Markers/kiosk.png',
                title: 'kiosk en markt',
                type: 'kiosk en markt'
            });

            var icons = {
                parking: {
                    name: 'Parkingcentrum',
                    icon: 'Markers/parkinggarage.png'
                },
                supermarkten: {
                    name: 'supermarkten',
                    icon: 'Markers/supermarket.png'
                },
                kiosk: {
                    name: 'kiosk en markt',
                    icon: 'Markers/kiosk.png'
                },
                fietsenstalling: {
                    name: 'fietsenstalling',
                    icon: 'Markers/bicycle.png'
                }
            };

            var contentString = '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
                '<div id="bodyContent">'+
                '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
                'sandstone rock formation in the southern part of the '+
                'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
                'south west of the nearest large town, Alice Springs; 450&#160;km '+
                '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
                'features of the Uluru - Kata Tjuta National Park. Uluru is '+
                'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
                'Aboriginal people of the area. It has many springs, waterholes, '+
                'rock caves and ancient paintings. Uluru is listed as a World '+
                'Heritage Site.</p>'+
                '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
                'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
                '(last visited June 22, 2009).</p>'+
                '</div>'+
                '</div>';


            checkbox1.checked = true;
            checkbox2.checked = true;
            checkbox3.checked = true;
            checkbox4.checked = true;

            checkbox1.onclick = function() {
                if (!this.checked) {
                  data_layer1.setMap(null);
                }
                else
                {
                  data_layer1.setMap(map);
                }
            };

            checkbox2.onclick = function() {
                if (!this.checked) {
                  data_layer2.setMap(null);
                }
                else
                {
                  data_layer2.setMap(map);
                }
            };

            checkbox3.onclick = function() {
                if (!this.checked) {
                  data_layer3.setMap(null);
                }
                else
                {
                  data_layer3.setMap(map);
                }
            };

            checkbox4.onclick = function() {
                if (!this.checked) {
                  data_layer4.setMap(null);
                }
                else
                {
                  data_layer4.setMap(map);
                }
            };

            map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

            var infowindow1 = new google.maps.infoWindow();

            data_layer1.addListener('click', function(event) {
                infowindow1.setContent(contentString);
                infowindow1.setPosition(event.feature.getGeometry().get());
                infowindow1.setOptions({pixelOffset: new google.maps.Size(0, -30)});
                infowindow1.open(map)
            });
        }


    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVbOZ-baAJyXl2XwA3pTMskXrOmEEizEM&callback=initMap" async defer>
    </script>

    <div class="footer">
        <p> Disclaimer alle data is open source en is toegestemd voor gebruik </p>
    </div>
</body>

my new code: 我的新代码：

http://jsbin.com/qamoyepaho/edit?html,js,output http://jsbin.com/qamoyepaho/edit?html,js，输出

Answer 1

Yes, google.maps.infoWindow is not a constructor but google.maps. 是的，google.maps.infoWindow不是构造函数，而是google.maps。 I nfoWindow is. 我是nfoWindow。

And the infowindow1 is called from the outside, so create it there 而且infowindow1是从外部调用的，因此在此处创建它

var infowindow1;
var contentString;
function initMap() {
    [...]
    infowindow1 = new google.maps.InfoWindow();
}

document.getElementById('data_layer1').addEventListener('click', function(event) {
    infowindow1.setContent(contentString);
    infowindow1.setPosition({lat: 52.0704978, lng: 4.3006999000000405});
    infowindow1.setOptions({pixelOffset: new google.maps.Size(0, -30)});
    infowindow1.open(map)
});

Answer 2

I changed this: 我改变了这个：

data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson');
data_layer1.setStyle({
  icon: 'Markers/parkinggarage.png',
  title: 'parkeercentrums'
});

to: 至：

data_layer1.loadGeoJson('http://geoportaal-ddh.opendata.arcgis.com/datasets/fc8de486a74d4b66bcd84d453c5f82c4_1.geojson', null, function() {
   addDataLayerListeners(data_layer1, 'parkeercentrums');
});
data_layer1.setStyle({
   title: 'parkeercentrums'
});

I removed the icon property from the style object because it would cause the markers to not get drawn on the map. 我从样式对象中删除了icon属性，因为它会导致标记无法在地图上绘制。 I also specified a callback function for each loadGeoJson method call. 我还为每个loadGeoJson方法调用指定了一个回调函数。 This function is run once the Geo JSON data has finished loading. Geo JSON数据加载完成后，便会运行此功能。 The callback function executes the addDataLayerListeners function and passes it the data layer and the title of the data layer. 回调函数执行addDataLayerListeners函数并将其传递给数据层和数据层的标题。 The addDataLayerListeners is defined as: addDataLayerListeners定义为：

function addDataLayerListeners(data_layer, infoWindowContent) {
 data_layer.addListener('click', function(event) {
   infowindow.setContent(infoWindowContent);
   infowindow.setPosition(event.feature.getGeometry().get());
   infowindow.setOptions({
     pixelOffset: new google.maps.Size(0, -30)
   });
   infowindow.open(map)
 });
}

It takes in the data layer object ( data_layer ) and a string to be used for the content of the info window ( infoWindowContent ). 它接受数据层对象（ data_layer ）和一个用于信息窗口内容的字符串（ infoWindowContent ）。 The function adds a click event listener to the data layer object and passes infoWindowContent to the infowindow.setContent method call. 功能增加了一个点击事件侦听到数据层对象，并将infoWindowContent到infowindow.setContent方法调用。

I also made the info window a global variable and instantiated it in the initMap function. 我还使信息窗口成为全局变量，并在initMap函数中实例化了它。 At the top of the code I add 在代码的顶部，我添加

var infowindow;

and in the initMap function I add: 并在initMap函数中添加：

infowindow = new google.maps.InfoWindow();

I did this so there is only one instance of the info window on the map. 我这样做是为了在地图上只有一个信息窗口实例。

Take a look at this JSBin for a working example. 看一下这个JSBin的工作示例。

如何在Google Maps Api的数据层中添加信息窗口

问题描述

2 个解决方案

解决方案1
0 2018-03-07 15:17:17

解决方案2
0 已采纳 2018-03-07 15:38:32

如何在Google Maps Api的数据层中添加信息窗口

问题描述

2 个解决方案

解决方案1 0 2018-03-07 15:17:17

解决方案2 0 已采纳 2018-03-07 15:38:32

解决方案1
0 2018-03-07 15:17:17

解决方案2
0 已采纳 2018-03-07 15:38:32