问题：
google地图未捕获类型错误：无法读取null的属性“offsetWidth”

鲜于俊侠
2023-03-14
这是包含GoogleMapAPI的源代码。我是网络编程的新手。我几乎没有做过这个网页。但我面临着上述错误。我读了很多关于这个错误的问题。但我无法纠正这个错误。请修复此错误。谢谢
<html>  
<head>  
<title>geocoder</title>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">  
</script>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">  
</script>  
<script type="text/javascript">  

var kyun ="kyun";
var map;
var marker;
var formated_address2;
var temp_x;
var temp_y;
var value1;
    $(document).ready(function() {   

        var latlng = new google.maps.LatLng(37.5640, 126.9751);   
        var myOptions = {   
              zoom : 12,   
              center : latlng,   
              mapTypeId : google.maps.MapTypeId.ROADMAP   
        }   
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);   
        marker = new google.maps.Marker({   
            position : latlng,    
            map : map   
        });   

        var geocoder = new google.maps.Geocoder();   



        google.maps.event.addListener(map, 'click', function(event) {   
            var location = event.latLng;   
            geocoder.geocode({   
                'latLng' : location   
            },   
            function(results, status){   
                if( status == google.maps.GeocoderStatus.OK ) {   
                    $('#address').html(results[0].formatted_address);   
                    $('#lat').html(results[0].geometry.location.lat());   
                    $('#lng').html(results[0].geometry.location.lng());
                    value1 = results[0].geometry.location.lat() +',' + results[0].geometry.location.lng();
                }   
                else {   
                    alert("Geocoder failed due to: " + status);   
                }   
            });   
            if( !marker ) {   
                marker = new google.maps.Marker({   
                    position : location,    
                    map : map
                });   
            }   
            else {   
                marker.setMap(null);   
                marker = new google.maps.Marker({   
                    position : location,    
                    map : map
                });   
            }   
            map.setCenter(location);   
        });   
    });   

GoogleMap = {
        /* 초기화. */
        initialize : function() {
            this.input = document.getElementById("GoogleMap_input");
            this.address = document.getElementById("GoogleMap_addr");
            this.geocoder = new google.maps.Geocoder();
            this.infowindow = new google.maps.InfoWindow();

            //지도 생성.(기본 위치 서울.)
            var latlng = new google.maps.LatLng(37.56641923090,126.9778741551);
            var myOptions = {
                zoom: 15,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            this.map = new google.maps.Map(
                    document.getElementById("GoogleMap_map"),myOptions);

            //마커 생성.
            this.marker = new google.maps.Marker({
                map : this.map,
                animation: google.maps.Animation.DROP
            });
        },
        /* 주소 검색.(지오코딩) */
        codeAddress : function() {
            var address = this.input.value;
            //콜백 함수 호출.
            this.geocoder.geocode( { 'address': address}, 
                           function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    //검색 된 주소 목록.
                    GoogleMap.address.innerHTML = "";
                    var ul = document.createElement('ul');
                    for(var i=0; i<results.length; i++){
                        var li = document.createElement('li');
                        var a = document.createElement('a');

                        a.href = "#" + results[i].geometry.location;


                        var str_pos = results[i].geometry.location.toString().split(',');

                        var x = str_pos[0]
                        x = x.substring(1,x.length).split('.');
                        x = x[0] + '.' + x[1].substring(0,6);
                        temp_x = x;

                        var y = str_pos[1]
                        y = y.substring(1,y.length).split('.');
                        y = y[0] + '.' + y[1].substring(0,6);
                        temp_y = y;


                        value = x+","+y;
                        a.innerHTML = results[i].formatted_address;
                        formated_address2 = results[i].formatted_address;
                        GoogleMap.clickAddress(a, results[i].geometry.location,
                                results[i].formatted_address);

                        li.appendChild(a);
                        ul.appendChild(li);
                    }
                    GoogleMap.address.appendChild(ul);
                }
            });
        },
        //주소 클릭 이벤트.
        clickAddress : function(a, addr,content){
            a.onmousedown = function(){
                //지도와 마커이동.
                /*
                GoogleMap.map.setCenter(addr);
                GoogleMap.marker.setPosition(addr);
                GoogleMap.marker.setAnimation(google.maps.Animation.DROP);
                GoogleMap.infowindow.setContent(content);
                GoogleMap.infowindow.open(GoogleMap.map,GoogleMap.marker);
                */
                kyun = addr;
            clss.a();
            }
        }
    }
    window.onload = function(){
        GoogleMap.initialize();
    }

    function insertText()
{
  var tempName = window.top.dialogArguments;
  tempName.userName = value1;
  tempName.changeText();
}

function modalCancel()
{
  var tempName = window.dialogArguments;
  tempName.changeText(); 
}
function parentClose(){
 window.top.close();
}
function newWin(){
 window.open("test.html","","");
}
function modalclose(){
 self.close();
}


clss = {
    a: function () {  
         map.setCenter(kyun);
         marker.setPosition(kyun);
         marker.setAnimation(google.maps.Animation.DROP);
         $('#address').html(formated_address2);   
         $('#lat').html(temp_x);   
         $('#lng').html(temp_y);
         value1 = temp_x+','+temp_y;
    }
}

</script>
</head>  
<body>  
    <table border="1">  
        <tr>  
            <td colspan="2"><div id="map_canvas" style="width: 460px; height: 380px;"></div></td>  
        </tr>  
        <tr>  
            <th width="100">위도</th>  
            <td id="lat"></td>  
        </tr>  
        <tr>  
            <th>경도</th>  
            <td id="lng"></td>  
        </tr>  
        <tr>     
            <th>주소</th>  
            <td id="address"></td>  
        </tr>
        <tr>
        <td colspan = "2">
            <div> 
            <input id="GoogleMap_input" type="textbox" value="" onkeydown="javascript:if(event.keyCode == 13) GoogleMap.codeAddress();"  style='width:365px;'> 
            <input type="button" value="주소검색" onclick="javascript:GoogleMap.codeAddress();">
            </div>
            <div id="GoogleMap_addr"></div> 
        </td>
        </tr>
        <tr>
        <td  style='width:450px;' colspan ="2" align = "center">
        <TABLE border = "0">
            <div>
            <tr>
            <td style='width:225px;' align = "center">
            <INPUT VALUE="취소" TYPE=button onclick="window.close();" style='width:200px;'><BR>
            </td>
            <td style='width:225px;' align = "center">
            <INPUT VALUE="확인" TYPE=button onclick="insertText();window.close();" style='width:200px;'>
            </td>
            </tr>
            </div>
        </TABLE>
        </td>
        </tr>
    </table>  
</body>  
</html>
瞿博学
2023-03-14
尝试在HTML元素之后调用JavaScript函数，因为大多数情况下出现此问题是因为调用脚本函数时元素尚未完全呈现。
google地图未捕获类型错误：无法读取null的属性“offsetWidth”

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档
