Google 对话框中的地图可视化错误

Question

我已经为 JavaScript.

使用 knockout.js 和 Google 地图 API 开发了一个网络应用程序

首先，我创建了一个地理定位功能模板。模板定义如下：

<script id="geolocalization-template" type="text/html">
    <div id="mapsAddress">
        <div id="maps-header" class="section tableCentred">
            <table class="tableCentred">
                <tr class="ucTitle">
                    <td>Address Type</td>
                    <td>Zip Code</td>
                    <td>District</td>
                    <td>City</td>
                    <td>Street</td>
                </tr>
                <tr>
                    <td>Advertized Address</td>
                    <td><input id="txZipCode" type="text" data-bind="value: AdvertizedAddress.ZipCode"/></td>
                    <td><input id="txProvince" type="text" data-bind="value: AdvertizedAddress.AreaCode"/></td>
                    <td><input id="txCity" type="text" data-bind="value: AdvertizedAddress.Town"/></td>
                    <td><input id="txStreet" type="text" data-bind="value: AdvertizedAddress.Street"/></td>
                </tr>
                <tr>
                    <td>Normalized Address</td>
                    <td><label id="txNorZipCode" data-bind="text: NormalizedAddress.ZipCode"/></td>
                    <td><label id="txNorProvince" data-bind="text: NormalizedAddress.AreaCode"/></td>
                    <td><label id="txNorCity" data-bind="text: NormalizedAddress.Town"/></td>
                    <td><label id="txNorStreet" data-bind="text: NormalizedAddress.Street"/></td>
                </tr>
            </table>
        </div>
        <div class="clear"></div>
        <div id="maps" class="maps"></div>
    </div>
</script>

我为 jQuery 对话框创建了两个 div。这是代码：

<!-- Dialog Puntual Geolocalization -->
<div id="geolocalization-puntual-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BaseViewModel.puntual }"></div>

<!-- Dialog Massive Geolocalization -->
<div id="geolocalization-massive-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BaseViewModel.massive }"></div>

在我的项目中，我有两个按钮附加到这个 JavaScript 函数：

OpenDialogPunctualGeocoding : function(){
    $("#geolocalization-punctual-dialog").dialog(
                {
                    width: dialogWidth,
                    height: dialogHeight,
                    create: BasicViewModel.geo.initMap("punctual"),
                    buttons: [
                        {
                            text: ShowOnMap,
                            click: function () {
                                BasicViewModel.geo.ShowOnMap("punctual");
                            }
                        },
                        {
                            text: ShopDBResources.Save,
                            click: function () {
                                BasicViewModel.geo.GeolocalSave();
                                $("#geolocalization-punctual-dialog").dialog("close");
                            }
                        }
                    ]
                });
},
OpenDialogMassiveGeocoding : function(){
    $("#geolocalization-massive-dialog").dialog(
            {
                width: dialogWidth,
                height: dialogHeight,
                create: BasicViewModel.geo.initMap("massive"),
                buttons: [
                    {
                        text: ShowOnMap,
                        click: function () {
                            BasicViewModel.geo.ShowOnMap("massive");
                        }
                    },
                    {
                        text: Save,
                        click: function () {
                            $("#geolocalization-massive-dialog").dialog("close");
                        }
                    }
                ]
            });
},

这是我的 initMap 函数：

initMap: function (entityType) {
        if (!entityType)
            return;

        var query = undefined;
        if (entityType == "puntual";
            query = "#geolocalization-puntual-dialog div#maps";
        else if (entityType == "massive")
            query = "#geolocalization-massive-dialog div#maps";

        try{
            map = new google.maps.Map($(query)[0], {
                center: BasicViewModel.GoogleMapsDefaults.center,
                zoom: BasicViewModel.GoogleMapsDefaults.zoom
            });
            var infoWindow = new google.maps.InfoWindow({ map: map });

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                BasicViewModel.geo.handleLocationError(false, infoWindow, map.getCenter());
            }
        } catch (ex) {
            WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message);
        }
    },

所以，这就是我的场景。现在我的问题如下：第一次打开对话框时，我可以查看如下图所示的地图：

如果我关闭我的对话框并尝试重新打开它，我将无法查看我的地图，如下图所示：

现在，魔术是：我在浏览器上按 CTRL + F，然后我可以查看我的地图：

你能帮帮我吗？谢谢

Answer 1

我找到了解决这个问题的方法。我用这行代码更改了我的 initMap 函数：

google.maps.event.trigger(map, 'resize');

因此我的 initMap 函数将类似于以下代码：

try{
            map = new google.maps.Map($(query)[0], {
                center: BasicViewModel.GoogleMapsDefaults.center,
                zoom: BasicViewModel.GoogleMapsDefaults.zoom
            });
            google.maps.event.trigger(map, 'resize');

            var infoWindow = new google.maps.InfoWindow({ map: map });

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };

                    infoWindow.setPosition(pos);
                    infoWindow.setContent('Location found.');
                    map.setCenter(pos);
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                BasicViewModel.geo.handleLocationError(false, infoWindow, map.getCenter());
            }
        } catch (ex) {
            WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message);
        }
    },

Google 对话框中的地图可视化错误

Google Maps visualization error on dialog

javascript

google-maps

knockout.js

jquery-dialog