显示 Google 地图 InfoWindow OnLoad答案

【问题标题】：Show Google Maps InfoWindow OnLoad显示 Google 地图 InfoWindow OnLoad
【发布时间】：2015-04-22 11:23:22
【问题描述】：

如何显示 Google Maps InfoWindows OnLoad 文档？一切都很完美。 InfoWindow 会在点击时弹出，但我不是 100% 确定如何解决问题，它会在加载时显示...

请在下面找到我的代码：

    <script type="text/javascript">
        var infowindow = null;

        $(document).ready(function() {
            initialize();
        });

        function initialize() {
            var centerMap = new google.maps.LatLng(52, 10);

            var myOptions = {
                zoom: 5,
                center: centerMap,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            var map = new google.maps.Map(document.getElementById("maps"), myOptions);

            setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
                content: "loading...",
                maxWidth: 60
            });

            var bikeLayer = new google.maps.BicyclingLayer();
            bikeLayer.setMap(map);
        }

        var sites = [
            // array here
        ];

        function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                var marker = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4]
                });

                var contentString = "Google Maps";

                google.maps.event.addListener(marker, "click", function () {
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
    </script>

【问题讨论】：

触发标记点击：3
流式回答stackoverflow.com/questions/28497023/…
调用 infowindow.open 加载时打开信息窗口，完成后关闭。
任何人都可以为上面的代码提供一个工作示例吗？
您希望在加载时打开哪个信息窗口？

标签： javascript google-maps

【解决方案1】：

为每个标记使用单独的信息窗口，您可以将它们全部打开。详情请看代码sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<head lang="en">
  <meta charset="UTF-8">
  <style>
    html,
    body,
    #maps {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
  <script>
    var infowindow = null;
    google.maps.event.addDomListener(window, 'load', initialize);

    function initialize() {
      var centerMap = new google.maps.LatLng(52, 10);
      var myOptions = {
        zoom: 5,
        center: centerMap,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("maps"), myOptions);

      setMarkers(map, sites);

      var bikeLayer = new google.maps.BicyclingLayer();
      bikeLayer.setMap(map);
    }

    var sites = [
      ["this is a title", 52, 10, 10, "<div>This is the first site</div>"]
    ];

    function setMarkers(map, markers) {
      for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
          position: siteLatLng,
          map: map,
          title: sites[0],
          zIndex: sites[3],
          html: sites[4]
        });
        var infowindow = new google.maps.InfoWindow({
          content: sites[4],
          maxWidth: 60
        });
        infowindow.open(map, marker);

        google.maps.event.addListener(marker, "click", function() {
          infowindow.setContent(this.html);
          infowindow.open(map, this);
        });
      }
    }
  </script>
</head>

<body>
  <div id="maps"></div>
</body>

</html>

【讨论】：

【解决方案2】：

对于您的问题，我有一个提示。这是在地图加载后通过带有 trigger 功能的代码 javascript 点击标记。

示例

google.maps.event.trigger(marker, 'click');

<script>
$(document).ready(function(){
       google.maps.event.trigger(marker, 'click'); //with marker is global validate
});
</scrip>

UPDATE，如果你有一个标记，当 initialize(); 调用 google.maps.event.trigger(marker , 'click'); 添加在initialize();之后 //如何将标记声明为全局

<script type="text/javascript">
        var infowindow = null;
        var marker = null; //declare marker to global
        ...
</script>

更新，如果你有标记代码添加标记:)你改为

var _markers = [];
function setMarkers(map, markers) {
            for (var i = 0; i < markers.length; i++) {
                var sites = markers[i];
                var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
                _markers[i] = new google.maps.Marker({
                    position: siteLatLng,
                    map: map,
                    title: sites[0],
                    zIndex: sites[3],
                    html: sites[4]
                });

                var contentString = "Google Maps";

                google.maps.event.addListener(_markers[i], "click", function () {                    
                    infowindow.setContent(this.html);
                    infowindow.open(map, this);
                });
            }
        }
        $(document).ready(function() {
            initialize();
            for(var i = 0, count = _markers.length; i<count; i++){
               google.maps.event.trigger(_markers[i], 'click');
            }
        });

通过触发点击来查看完整示例

Trigger a click event on a Google Map Marker by clicking on a button and a seperate JS file with jQuery

处理事件加载地图，可以使用titleloaded事件

google.maps.event.addListener(map, 'tilesloaded', function() {
  // Visible tiles loaded!
});

【讨论】：

我一直都失败了，即使是你的例子。我必须如何以及在哪里将其放入我的代码中:(
谢谢，但如果只在 SetMarker 函数中调用“标记”，我该如何将其设为全局？
我看不到您如何展示如何使我的 setMarker 函数“标记”变量全局化...您的 onload 脚本当然会告诉我未定义的标记.. :(
您能看看我的代码并告诉我该怎么做吗？我理解你的解决方法，但我不明白如何重新开发我的结构
是的，所有窗口都在加载:(

【解决方案3】：

您正在单击事件中调用 InfoWindow.open() 方法。要打开 onLoad 信息窗口，您必须在初始化函数中调用它。或者你可以将它添加到 addDomListener() 中。参考：Same kind of discussion

【讨论】：

抱歉，“同类讨论”是关于 onclick 事件而不是 onload。
是的。要向您的 onload 函数添加方法，您可以尝试此 infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(infoWindow, 'DOMContentLoaded', function() { // 这里调用 InfoWindow.open() 方法 });
但是我怎样才能将它调整为我拥有的一段代码呢？我不知道如何解决它...