javascript - 谷歌地图地理编码 - offsetWidth

Question

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

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

0x800a138f - JavaScript 运行时错误:无法获取未定义或 null 引用的属性“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

此问题通常是由于在需要访问 map div 的 javascript 运行之前未呈现该 map 。

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

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