谷歌地图地理编码 - offsetWidth答案

【问题标题】：Google map geocoding - offsetWidth谷歌地图地理编码 - offsetWidth
【发布时间】：2015-01-15 15:46:11
【问题描述】：

我在使用谷歌地图 API 显示邮政编码时遇到问题。但是，它给出了一个错误：

https://maps.gstatic.com/maps-api-v3/api/js/19/6/main.js 中 ...、列 ... 处未处理的异常

0x800a138f - JavaScript 运行时错误：无法获取未定义或空引用的属性“offsetWidth”

你能给我一些指导吗？

代码文件：

    public string location = string.Empty;

    protected void Page_Load(object sender, EventArgs e)
    {
        using (OleDbConnection conn = new OleDbConnection())
        {
            String connection = System.Configuration.ConfigurationManager.ConnectionStrings["google_string"].ConnectionString;

            conn.ConnectionString = connection;
            conn.Open();

            String sql = "select * from tbl_Post";
            OleDbCommand cmd = new OleDbCommand(sql,conn);
            var rdr = cmd.ExecuteReader();
            rdr.Read();

            if(!string.IsNullOrEmpty(rdr["location"].ToString()))
            {

                location = rdr["location"].ToString();
            }

        }
    }
}

}

asp 文件：

    <div>
        <%--map canvas--%>
        <style type="text/css">
            html, body, #map-canvas {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>


        <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=....">

        </script>

        <script type="text/javascript">
            var geocoder;
            var map;

            function initialize() {
                geocoder = new google.maps.Geocoder();

                var latlng; 
                var mapOptions = {
                    //street level

                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom: 18,

                }


                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                //load post code address (CALLING FUNCTION)
                codeAddress();
            }


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

            function codeAddress() {


                geocoder.geocode({ 'address': '<%= location%>' }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        map.setCenter(results[0].geometry.location);

                        var marker = new google.maps.Marker({
                            map: map,
                            position: results[0].geometry.location
                        });
                    } else {
                        alert("Geocode was not succesfull for the following reason" + status);
                    }
                });  
            }
        </script>

    </div>

【问题讨论】：

标签： javascript c# asp.net google-maps

【解决方案1】：

这个问题通常是由于地图div在需要访问它的javascriptruns之前没有被渲染。

你似乎快到了，因为你没有 id="map-canvas" 的元素。所以给你的 div 一个 id，然后它应该按预期工作。

<div id="map-canvas"></div>

【讨论】：

完全正确，我忘了放这一行。现在它正在工作。