javascript - 加载时将 Google map 信息窗口居中

标签 javascript jquery google-maps google-maps-api-3

我在页面加载时将我的 InfoWindow 居中时遇到问题。加载时, map 以标记为中心,这使 InfoWindow 远离屏幕(我正在为我的 map 容器设置一个较短的高度)。

现在单击标记确实使 map 在 InfoWindow 上重新居中,这样它看起来就像我想要的那样。既然如此,我什至尝试触发 marker.click 触发器来实现负载解决方案,但没有运气。我错过了什么?

JSFIDDLE:http://jsfiddle.net/q9NTS/7/

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    var marker;
    var infoWindow;
    var map;
    function initialize() {
        var mapOptions = {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        setLocation();
    }

    function setLocation() {
        var address = '@(Model.Event.Address)' + ', ' + '@(Model.Event.City)' + ', ' + '@(Model.Event.State)' + ' ' + '@(Model.Event.Zip)';
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var position = results[0].geometry.location;
                marker = new google.maps.Marker({
                    map: map,
                    position: position,
                    title: '@(Model.Event.Venue)'
                });
                map.setCenter(marker.getPosition());

                var content = 'blah';
                infoWindow = new google.maps.InfoWindow({
                    content: content
                });

                google.maps.event.addListener(marker, 'click', function () {
                    infoWindow.open(map, marker);
                });

                //infoWindow.open(map, marker); doesn't work
                google.maps.event.trigger(marker, 'click'); //still doesn't work
            }
            else {
                //
            }
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

最佳答案

您显然只需要在触发点击事件之前等待更长时间。

// wait until the map is idle.
google.maps.event.addListenerOnce(map, 'idle', function() {
  setTimeout(function() {
    // wait some more (...)
    google.maps.event.trigger(marker, 'click'); //still doesn't work
  },2000);
});

fiddle

关于javascript - 加载时将 Google map 信息窗口居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18304525/

相关文章:

javascript - setTimeout 和 clearTimeout 中断

javascript - 如何在 fullPage.js 中为所有幻灯片设置一个背景?

javascript - 使用 jQuery 动态添加 'divs'

javascript - 打开 GoogleMaps 应用程序,以便从网站在 Android 上进行导航

javascript - Angular - 如何根据数组中的值检查复选框?

javascript - 基于路由参数动态注入(inject)特定工厂由于某种原因失败

javascript - 尝试编写渐变创建器 javascript 和 jquery

javascript - 如何使用 JavaScript 或 jQuery 获取证书列表?

android - 采用 OpenGL ES 2.0 的 Google map 设备

android - 是否可以使用 DefaultClusterRenderer 和 ClusterManager 禁用聚类动画?