Question

有人对单击另一个标记时如何自动关闭信息窗口有任何建议吗？当前，用户必须在单击另一个标记时手动关闭信息框。我希望有一种可以轻松整合到我的代码中的方法。看来我正在为每个标记创建单独的信息框。当我们扩大该项目的规模时，我们将有1万多个标记，这些标记将按不同的类别分开。

我阅读了有关创建一个infoWindow然后更改内容的建议，但是，如果我正确理解我的代码，则我将为每个标记创建单独的信息框，因为它们来自XML文件。如何将这种技术与当前代码结合起来？

您可以在这里找到我的项目的实时示例：http://www.officerage.com/maps/ 这是我的示例代码：

 <!DOCTYPE html>
<html lang="en">
<head>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <meta charset="UTF-8">
    <title>A Basic Map</title>
    <style>
        #map {
            height: 100%;
        }
        /* Optional: Makes the sample page fill the window. */
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>

    </head>

    <body>
    <div id="map"></div>
    <script>

    function infoCallback(infowindow, marker) {
    return function() { infowindow.open(map, marker); }; 
}
    function initMap() {
        var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(37.5, -122),
            mapTypeId: 'roadmap'
        };


        var map = new google.maps.Map(document.getElementById('map'), mapOptions);





        $.ajax({
    type: "GET",
    async: true,
    url: "testxml.xml",
    dataType: "xml",
    success:
    function (xml) {


    var places = xml.documentElement.getElementsByTagName("place");


    for (var i = 0; i < places.length; i++) {
    var lat = places[i].getAttribute('latitude');
    var long = places[i].getAttribute('longitude');
    var category = places[i].getAttribute('Info');
    var latLng = new google.maps.LatLng(lat, long);

    var marker = new google.maps.Marker({
        position:  latLng,
        map: map,
        category:places[i].info,
        label:places[i].name

    });

    var infowindow = new google.maps.InfoWindow({
    content:category});
    google.maps.event.addListener(marker, 'click', infoCallback(infowindow,marker));


}



    }



}


);

    }
    </script>


<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCz_-TAwsP-dL_dsEkmz8sGEU1hyPYKHik&callback=initMap">
</script>
</body>
</html>

Answer 1

要修改代码以使用单个infowindow，将其移动到单击的标记上并更新其内容以反映该标记的数据，请更改infoCallback以使用 content < / em>作为第一个参数：

function infoCallback(content, marker) { return function() { infowindow.setContent(content); infowindow.open(map, marker); }; } var infowindow; function initMap() { infowindow = new google.maps.InfoWindow(); // ...

然后像这样使用它：

var places = xml.documentElement.getElementsByTagName("place"); for (var i = 0; i < places.length; i++) { var lat = places[i].getAttribute('latitude'); var long = places[i].getAttribute('longitude'); var category = places[i].getAttribute('Info'); var latLng = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ position: latLng, map: map, category: places[i].info, label: places[i].name }); google.maps.event.addListener(marker, 'click', infoCallback(category, marker)); }

proof of concept fiddle

代码段：

html, body, #map { height: 100%; width: 100%; margin: 0px; padding: 0px }

<div id="map"></div> <script> function infoCallback(content, marker) { return function() { infowindow.setContent(content); infowindow.open(map, marker); }; } var infowindow; function initMap() { infowindow = new google.maps.InfoWindow(); var mapOptions = { zoom: 3, center: new google.maps.LatLng(37.5, -122), mapTypeId: 'roadmap' }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); var bounds = new google.maps.LatLngBounds(); var xml = parseXml(xmlStr); var places = xml.documentElement.getElementsByTagName("place"); for (var i = 0; i < places.length; i++) { var lat = places[i].getAttribute('latitude'); var long = places[i].getAttribute('longitude'); var category = places[i].getAttribute('Info'); var latLng = new google.maps.LatLng(lat, long); var marker = new google.maps.Marker({ position: latLng, map: map, category: places[i].info, label: places[i].name }); google.maps.event.addListener(marker, 'click', infoCallback(category, marker)); bounds.extend(marker.getPosition()); } map.fitBounds(bounds); } var xmlStr = '<places><place latitude="37.4529598" longitude="-122.1817252" Info="Menlo Park, CA"/><place latitude="37.43355" longitude="-122.2030209" Info="West Menlo Park, CA 94025"/><place latitude="37.424106" longitude="-122.1660756" Info="Stanford, CA"/></places>'; function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('MicrosoftXMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); } }; </script> <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

Google Maps API关闭InfoWindow（自动）

1 个答案: