Question

我正在从此解决方案中复制代码：Make Google Maps retain zoom and center after refresh? 我收到了错误

TypeError: map is undefined

在loadMapState函数中

map.setCenter(new google.maps.LatLng(savedMapLat,savedMapLng));

我确定这是一个var问题或放置的顺序，但我尝试了不同的选项，但它仍然不起作用。

完整的JS代码：

var markers = [
        ['Unit: 220</br>Status: <strong>EnR Post</strong></br>Crew1: GOODWIN, JEFFREY</br>Crew2: JOHNSON, CHRISTOPHER</br> Crew3: <None></br>Minutes In Status: 2</br>Run Number: <a href="../CReports/CallInformation-dynamic.aspx?p1=0" target="_blank">0', 28.01736000, -82.77961000, '220', 'marker-green-dot.png', 'EnR Post']
];

        google.maps.visualRefresh = true;
        function initializeMaps() {
        var myOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true
        };

        // you could use the event listener to load the state at a certain point
        loadMapState();

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        var infowindow = new google.maps.InfoWindow(), marker, i;
        var bounds = new google.maps.LatLngBounds();

        // as a suggestion you could use the event listener to save the state when zoom changes or drag ends
        google.maps.event.addListener(map, 'tilesloaded', tilesLoaded);
        function tilesLoaded() {
            google.maps.event.clearListeners(map, 'tilesloaded');
            google.maps.event.addListener(map, 'zoom_changed', saveMapState);
            google.maps.event.addListener(map, 'dragend', saveMapState);
        } 

        // functions below
        function saveMapState() { 
            var mapZoom=map.getZoom(); 
            var mapCentre=map.getCenter(); 
            var mapLat=mapCentre.lat(); 
            var mapLng=mapCentre.lng(); 
            var cookiestring=mapLat+"_"+mapLng+"_"+mapZoom; 
            setCookie("myMapCookie",cookiestring, 30); 
        } 

        function loadMapState() { 
            var gotCookieString=getCookie("myMapCookie"); 
            var splitStr = gotCookieString.split("_");
            var savedMapLat = parseFloat(splitStr[0]);
            var savedMapLng = parseFloat(splitStr[1]);
            var savedMapZoom = parseFloat(splitStr[2]);
            if ((!isNaN(savedMapLat)) && (!isNaN(savedMapLng)) && (!isNaN(savedMapZoom))) {
                map.setCenter(new google.maps.LatLng(savedMapLat,savedMapLng));
                map.setZoom(savedMapZoom);
            }
        }

        function setCookie(c_name,value,exdays) {
            var exdate=new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
            document.cookie=c_name + "=" + c_value;
        }

        function getCookie(c_name) {
            var i,x,y,ARRcookies=document.cookie.split(";");
            for (i=0;i<ARRcookies.length;i++)
            {
                x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
                y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
                x=x.replace(/^\s+|\s+$/g,"");
                if (x==c_name)
                {
                    return unescape(y);
                }
            }
            return "";
        }
                    // Load markers
                    for (i = 0; i < markers.length; i++) { 
                        var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
                        bounds.extend(pos);
                        marker = new google.maps.Marker({
                            position: pos,
                            map: map,
                            title: 'Unit: '+markers[i][3] + '/' + markers[i][5],
                            icon: 'icons/iconEZ2/'+markers[i][4]
                        });

                        google.maps.event.addListener(marker, 'click', (function (marker, i) {
                            return function () {
                                infowindow.setContent(markers[i][0]);
                                infowindow.open(map, marker);
                            }
                        })(marker, i));
                        map.fitBounds(bounds);
                    }
            }

非常感谢你！吉姆

Answer 1

在为地图变量指定任何内容之前，请先致电loadMapState()。

你需要交换这两行。

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
loadMapState();

在loadMapState变量之后定义map方法没有任何区别这一事实因为loadMapState方法在您输入{em>之前的loadMapState()时运行您声明map。

Answer 2

确保您加载Google Maps JS -BEFORE-自定义地图功能！

TypeError：map未定义

2 个答案: