谷歌地图地理编码- offsetWidth

Question

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

行中未处理的异常.列..。在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>

Answer 1

这个问题通常是由于在需要访问映射div的javascript运行之前没有呈现它。

您就快到了，就像您没有id="map-canvas"元素一样。因此，给您的div一个id，然后它应该可以正常工作。

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