Question

使用ajax将内容加载到我的infowindow的最佳方法是什么？现在我使用iframe得到类似的效果，但我并不满意。我认为这将是直截了当的，但由于某种原因令我感到困惑。这就是它现在的工作方式：

var markers = [];
  var infowindow = new google.maps.InfoWindow();
  $.each(JSON.parse(aulas), function(i, a){

    var latlng = new google.maps.LatLng(a.aula.lat, a.aula.lng);
    var marker = new google.maps.Marker({
      position : latlng,
      title: a.aula.title
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      infowindow.setContent("<div class='infowindow_content'><iframe src='aulas/show/" + a.aula.id + "'></iframe</div>");

      infowindow.open(map, marker);
    });
    markers.push(marker);
  });

在infowindow.setContent调用之前通过ajax获取内容会很容易，但我只想在infowindow打开时调用ajax。有什么想法吗？

BTW：我正在使用jQuery。

正如答案中所建议的那样，我决定将调用移到setContent并打开一个单独的函数。对于那些感兴趣的人来说，解决这个问题的代码是：

function load_content(marker, id){
  $.ajax({
    url: 'aulas/show/' + id,
    success: function(data){
      infowindow.setContent(data);
      infowindow.open(map, marker);
    }
  });
}

然后更改监听器：

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.close();
      load_content(marker, a.aula.id);
    });
    markers.push(marker);
  });

Answer 1

您可以在显示信息窗口后随时调用 infowindow.setContent 。因此，您最初可以使用微调器设置信息窗口内容，进行AJAX调用（来自事件处理程序），然后使用适当的数据从AJAX响应再次调用 infowindow.setContent 。

Answer 2

for (var i = 0; i < markersClient.length; i++) {
            var location = new google.maps.LatLng(lats[i], longs[i]);
            var marker = new google.maps.Marker({
                position: location,
                map: map,
                lid: markersClient[i].t
            });
            var infowindow = new google.maps.InfoWindow({
                content: ""
            });
            //debugger;
            marker.setTitle(" - ");
            markers.push(marker);
            google.maps.event.addListener(marker, 'click', function (target, elem) {
                infowindow.open(map, marker);
                $.ajax({
                      success:function () {
                      infowindow.setContent(contentString);
                     }
               });

intitalize map，marker，infowindow（没有内容）和标记的点击处理程序发出ajax请求

Answer 3

已经加载了infoWindow的内容，但是如果你要上传大尺寸的图像，我们必须等待第一次完全加载图像，然后设置infowindow的内容然后显示该信息窗口。上述要求的解决方案是可以的，但对于图像，可能无法立即加载，所以要检查是否加载了信息窗口的内容，只需要显示信息窗口。

Answer 4

10年后...通过ajax加载引脚，然后每个引脚通过ajax都有一个信息窗口。这是一个有效的示例：https://gmap.tarekadam.com，这是一个仓库https://github.com/tarekadam/gmap

当您添加Google密钥并提供PIN JSON的网址时，此代码将起作用。

<html>
<head>
    <title>gmap</title>

    <script src="//maps.google.com/maps/api/js?key=YOUR-KEY-GOES-HERE"></script>
    <script src="//code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>

    <script>
        $().ready(function () {
            let pinsets = [
                '/one_source_of_pins.json',
                '/another_source_of_pins.json'
            ];

            var map = new google.maps.Map(document.getElementById("map"), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 2.5
            });

            var infowindow = new google.maps.InfoWindow({
                content: ""
            });

            for (let i = 0; i < pinsets.length; i++) {
                let pinset = pinsets[i];

                $.ajax({
                    type: "GET",
                    url: pinset,
                    success: function (data) {

                        for (let ii = 0; ii < data.length; ii++) {
                            let datum = data[ii];
                            let marker = new google.maps.Marker({
                                position: new google.maps.LatLng(datum.lat, datum.lng),
                                map: map,
                                icon: '//thebackoffice.github.io/pins/'
                                    .concat(datum.icon)
                                    .concat('.png')
                            });


                            google.maps.event.addListener(marker, 'click', function (target, elem) {
                                infowindow.open(map, marker);
                                infowindow.setContent('Loading...');
                                $.ajax({
                                    type: "GET",
                                    url: datum.info,
                                    success: function (response) {
                                        infowindow.setContent(response);
                                    }.bind(infowindow)
                                });
                            }.bind(datum)
                                .bind(marker));

                            ii++;
                        }

                    }
                        .bind(pinset)
                        .bind(infowindow)
                });

            }

        });


    </script>

</head>
<body>
<ul>
    <li>Ajax calls load groups of pins.</li>
    <li>onclick an ajax call fetches the info window.</li>
</ul>
<div id="map" style="width:100%; height: 750px;"></div>
</body>
</html>

Google Maps V3：通过AJAX加载infowindow内容

4 个答案: