Question

我正在使用GMaps在我的网站上显示地图。使用infoWindow创建地图非常容易。但是，仅在单击标记时才会显示infoWindow。

我的Javascript：

var map;
$(document).ready(function(){
   map = new GMaps({
        div: '#map',
        lat: 11.5671732,
        lng: 104.92592450000006,
        zoom: 15
   });
   map.addMarker ({
       lat: 11.5671732,
       lng: 104.92592450000006,
       infoWindow: {
          content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
       },
   });
});

在堆栈溢出之后，我只看到人们使用Google地图API进行硬编码来实现这一目标。所以我想知道是否有任何选项可以在页面加载时自动显示infoWindow而不点击标记？

Here's the link to my map page

非常感谢任何帮助。

Answer 1

触发标记上的点击应该有效：

google.maps.event.trigger(map.markers[0], 'click');

proof of concept fiddle

代码段

var map;
$(document).ready(function() {
  map = new GMaps({
    div: '#map',
    lat: 11.5671732,
    lng: 104.92592450000006,
    zoom: 15
  });
  map.addMarker({
    lat: 11.5671732,
    lng: 104.92592450000006,
    infoWindow: {
      content: "<h3>D-Care Dental Clinic</h3><p class='address'>Address: No.26,St.23, <br />Sangkat Chey Chom Nas, Khan Daun Penh, Phnom Penh, Tel: 023 986836/012887601</p>"
    },
  });
  google.maps.event.trigger(map.markers[0], 'click');
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://hpneo.github.io/gmaps/gmaps.js"></script>
<div id="map"></div>

Answer 2

infowindow.open（地图，标记物）;

应该这样做。

它将通过一个例子更好地连接，基本上我们将简单地制作infowindow.open（）; “初始化”函数本身的一部分，并在地图加载上调用“初始化”函数。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
    function initialize() {
        var myLatlng = new google.maps.LatLng(28.4387675, 77.5243212); //replace with lan and lat
        var mapOptions = {
            zoom: 12,
            center: myLatlng
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<div id="bodyContent">'+
                    '<p>Add information for info window here</p>'+
                    '</div>'+
                    '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });
        var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Contact Us'
        });
        infowindow.open(map,marker);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

现在将此代码放在以下部分：

<div id="map-canvas" style="height:425px; "> </div>

是否有任何选项可以在页面加载时自动显示infoWindow

2 个答案: