Question

我已经实施了谷歌地图API。实际上我在同一页面上加载了两张地图。加载页面时会直接显示一个。第二个是单击按钮时显示的。然后出现一个带有地图的模态。模态显示无，然后单击后显示块。地图显示但不是全尺寸。这是我的js附加谷歌地图。

$(document).ready(function() {
        function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
            var R = 6371;
            var dLat = deg2rad(lat2-lat1);
            var dLon = deg2rad(lon2-lon1); 
            var a = Math.sin(dLat/2) * Math.sin(dLat/2) + Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * Math.sin(dLon/2) * Math.sin(dLon/2); 
            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
            var d = R * c;
            return d.toFixed(0);
        }

        function deg2rad(deg) {
          return deg * (Math.PI/180)
        }

        function initialize() {
            $('.map_canvas').each(function(index, Element) {
                var markers = new Array();
                var map_canvas = Element;
                var map_options = {
                    center: new google.maps.LatLng(<?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>, <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>),
                    zoom: 12,
                    scrollwheel: false,
                    mapTypeId: 'roadmap'
                };

                var map = new google.maps.Map(map_canvas, map_options);

                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function(position) {
                        markers = [
                            ['user', <?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>, <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>],
                            ['you', position.coords.latitude, position.coords.longitude]
                        ];

                        var dist = getDistanceFromLatLonInKm(
                            <?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>,
                            <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>,
                            position.coords.latitude,
                            position.coords.longitude
                        );

                        $('#left-content-map h2').append("<span class='medium-500 lower-case'> à " + dist + " KM</span>");

                        for (i = 0; i < markers.length; i++) {
                            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                            marker = new google.maps.Marker({
                                position: position,
                                map: map,
                            });
                        }
                    });
                } else {
                    markers = [
                        ['user', <?php echo !empty($user['coord'][0]) ? $user['coord'][0] : '0' ; ?>, <?php echo !empty($user['coord'][1]) ? $user['coord'][1] : '0'; ?>],
                    ];

                    for (i = 0; i < markers.length; i++) {
                        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
                        marker = new google.maps.Marker({
                            position: position,
                            map: map,
                        });
                    }
                }

                google.maps.event.addDomListener(window, "resize", function() {
                    var center = map.getCenter();
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center);
                });
            });

            var open = false;
            $("#show-full-map").on("click", function(){
                modal.init($('#full-map'))
                modal.popup(function(map) {
                    google.maps.event.trigger(map, "resize");
                }););
                open = true;
            });

            $('.close-modal').on("click", function(){
                modal.popin();
                open = false;
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
});

感谢您的未来回应。

Answer 1

好的，我找到了解决方案。

我只需添加一个setTimeout，其中一个执行触发resize事件的函数。

$("#show-full-map").on("click", function(){
            modal.init($('#full-map'))
            modal.popup();
            var refresh = function() {
                var center = map.getCenter();
                    google.maps.event.trigger(map, "resize");
                    map.setCenter(center);
                }
                setTimeout(refresh, 500);
                open = true;
            });

Answer 2

我的情况有所不同，但是至少如果没有任何帮助，可以尝试以下另一种选择：

更改（或自定义）后，我使用“调整大小”的东西来更新控件位置以使地图无效并更新控件位置。但是有一天，我注意到它不再起作用了。触发“调整大小”后没有任何反应。

花了几个小时后，我终于解决了它（现在它可以随时更新所有地图控件）：

mapInstance.setMapTypeId(mapInstance.mapTypeId);

这一行就足够了，不需要做任何其他事情（例如触发器调整大小或setZoom / setCenter）。

PS：我将它用于Google Maps v3.34

Google地图API调整大小不起作用

2 个答案: