javascript - 如何在 jquery 对话框中初始化 Google map ？

Question

我正在开发一个网络应用程序。我需要兼容 IE8 及以上版本。我正在使用 knockout.js 来实现 MVVM 模式。

<!-- Dialog Customer Geolocalization -->
<div id="geolocalization-customer-dialog" class="dialog" data-bind="template: { name: 'geolocalization-template', data: BasicViewModel.CustomerViewModel }"></div>

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

<!-- Geolocalization template -->
<script type="text/html" id="geolocalization-template">
    <div id="mapsAddress">
        <table>
            <tr class="ucTitle">
                <td>Zip Code</td>
                <td>District</td>
                <td>City</td>
                <td>Street</td>
            </tr>
            <tr>
                <td><input id="txZipCode" type="text" data-bind="value: ZipCode"/></td>
                <td><input id="txProvince" type="text" data-bind="value: Province"/></td>
                <td><input id="txCity" type="text" data-bind="value: City"/></td>
                <td><input id="txStreet" type="text" data-bind="value: Street"/></td>
            </tr>
        </table>
    </div>
    <div id="maps" class="maps"></div>
</script>

我使用下面的 JavaScript 代码初始化 map :

$(document).ready(function () {
    try {
        initMap();
        ko.applyBindings(BasicViewModel);
    } catch (ex) {
        WriteToConsole("Error code:" + ex.ErrorNumber + " Error message:" + ex.message);
    }
}

function initMap()
    try {
        map = new google.maps.Map($("#geolocalization-customer-dialog div#maps")[0], {
            center: { 
                lat: -34.397, 
                lng: 150.644 
            },
            zoom: 8
        });
    } catch (ex) {
        WriteToConsole("Error on initializing Google Maps:" + ex.ErrorNumber + " Error message:" + ex.message);
    }
}

我收到此错误:

"Impossible retrieve the property 'offsetWidth' of null reference"

请注意，id 为 geolocalization-customer-dialog 和 geolocalization-supplier-dialog 的 div 与 jQuery 对话框一起使用。

请问你能帮我吗？

Answer 1

我用这段代码解决了问题:

$("#geolocalization-customer-dialog").dialog(
        {
            width: 800,
            height: 600,
            create: initMap(), // <-- Here must be initializated the maps
            buttons: [
                {
                    text: "OK"
                },
                {
                    text: "Geolocalize"
                }
            ]
        });

map 必须在创建对话框时初始化。我不知道为什么，我认为如果<div>元素具有属性 display:none 它不起作用。