加载页面后,如何自动触发Google地图中的所有信息窗口?

时间:2018-03-15 09:20:29

标签: javascript html5 google-maps

我希望在没有用户点击标记的情况下显示由默认打开的所有信息窗口。

enter image description here

这是来自谷歌网站的数据阵列:

var locations = [
  ['中勝峰下山子寮 <br />100 kWh', 23.141162, 120.120495, 4],
  ['大江生醫S9 <br />120 kWh', 22.711022, 120.541029, 5],
  ['周啟正 <br />80 kWh', 23.317840, 120.267284, 3],
  ['禾豐 <br />200 kWh', 22.71637, 120.54331, 2],
  ['烏日高鐵 <br />110 kWh', 24.061611, 120.638747, 1]
];

我可以默认显示这些网站locations[i][0]而不点击吗?

  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      draggable: true,
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, marker);
      }
    })(marker, i));
  } 

请参阅我的 JSFiddle

1 个答案:

答案 0 :(得分:2)

您可以使用下面的代码。在答案帖子的最后,你有一个代码示例。

<html>

<head>

    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0
        }

        #map_canvas {
            height: 100%
        }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-          FxYoVTVq6Is6lD98&sensor=false">
    </script>
    <script type="text/javascript">

        var locations = [
            ['中勝峰下山子寮 <br />100 kWh', 23.141162, 120.120495, 4],
            ['大江生醫S9 <br />120 kWh', 22.711022, 120.541029, 5],
            ['周啟正 <br />80 kWh', 23.317840, 120.267284, 3],
            ['禾豐 <br />200 kWh', 22.71637, 120.54331, 2],
            ['烏日高鐵 <br />110 kWh', 24.061611, 120.638747, 1]
        ];

        function initialize() {

            var myOptions = {
                center: new google.maps.LatLng(33.890542, 151.274856),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP

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

            setMarkers(map, locations)

        }

        function setMarkers(map, locations) {

            var marker, i

            for (i = 0; i < locations.length; i++) {

                var loan = locations[i][0]
                var lat = locations[i][1]
                var long = locations[i][2]
                var add = locations[i][3]

                latlngset = new google.maps.LatLng(lat, long);

                var marker = new google.maps.Marker({
                    map: map, title: loan, position: latlngset
                });
                map.setCenter(marker.getPosition())


                var content = locations[i][0];

                var infowindow = new google.maps.InfoWindow()

                google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
                    return function () {
                        infowindow.setContent(content);
                        infowindow.open(map, marker);
                    };
                })(marker, content, infowindow));
                google.maps.event.trigger(marker, 'click');
            }
        }
    </script>
</head>

<body onload="initialize()">
    <div id="default" style="width:100%; height:100%"></div>
</body>

</html>

示例:https://codepen.io/calinvlasin/pen/zWqQaa