个人中心
gpt4 book ai didi

google-maps - 谷歌地图未捕获类型错误 : Cannot read property 'offsetWidth' of null

转载 作者：行者123 更新时间：2023-12-01 02:41:07 25 4
gpt4 key购买 nike

这是包含 googlemap api 的源代码。我是网络编程的新手。我几乎没有制作这个网页。但我遇到了上述错误。我读了很多问题都认为是这个错误。但我无法修复此错误。请修复此错误。谢谢。

<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>

最佳答案

尝试在 HTML 元素之后调用 JavaScript 函数，因为大多数情况下会出现此问题，因为调用脚本函数时元素尚未完全呈现。

关于google-maps - 谷歌地图未捕获类型错误 : Cannot read property 'offsetWidth' of null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16839803/

25 4 0
文章推荐： javascript - WebRTC 如何设置限制以在可用时使用音频
文章推荐： google-visualization - 谷歌图表 "does not fit either the Control or Visualization specification"
文章推荐： php - CKEDITOR - Uncaught Error : The specified element mode is not supported on element: "meta"
文章推荐： asp.net - Windows Azure - 内容长度不匹配的频繁协议(protocol)违规
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com