Question

让我们先从谷歌地图代码开始：

var map;

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.4357808, 4.991315699999973),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}

var seg = {
    1: 'invesCastProd',
    2: 'forged',
    3: 'airframe',
    5: 'corp',
    6: 'structurals'
}

var comp = {
    1: 'structurals',
    2: 'airfoils',
    3: 'airfoils',
    4: 'wyman',
    5: 'energy',
    6: 'strucComp',
    7: 'mechHard',
    8: 'engineProd',
    9: 'corp',
    10: 'aero',
    12: 'timet',
    13: 'specMetals'
}

    var myJSON = {};
    var myMarkers=[];

    $.getJSON("/pcc-common/static/pcc-locations.json", function(json1) {
        myJSON=json1;
        $.each(json1, function(key, data) {
            var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
            // Creating a marker and putting it on the map
            var marker = new google.maps.Marker({
                position: latLng
            });
            myMarkers[key]=marker;
            marker.setMap(map);

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function() {

                if (infoWindow) {infoWindow.close();}
                infoWindow = new google.maps.InfoWindow({
                    content: "<h5>" + data.display_name + "</h5>" +
                    "<div>" + data.street+ "</div>" +
                    "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" +
                    "<div class='mapPhoneNum'>" + data.telephone + "</div>" +
                    "<a href=" + data.web_url + ">Website</a>"
                });
                infoWindow.open(map, marker);
                map.setZoom(15);
                map.panTo(this.getPosition());

                google.maps.event.addListener(infoWindow,'closeclick',function(){
                  resetMapOrigin();
                });

            });

            filterMarkers = function(category){

                var component = category.data("component_id");
                var segment = category.data("segment_id")

                setMapOnAll(null);
                resetMapOrigin();

                var filteredMarkers=[];

                $.each(myJSON, function(key, data) {


                    if( typeof(component)!="undefined" ){

                      if( (myJSON[key].component_id == component) && (myJSON[key].segment_id == segment) ){ 
                        filteredMarkers.push(key);
                      }

                    }else{
                      if( myJSON[key].segment_id == segment ){
                        filteredMarkers.push(key);
                      }
                    }
                });

                for(i=0;i<filteredMarkers.length;i++){
                    myMarkers[filteredMarkers[i]].setMap(map);
                }
            }

            function setMapOnAll(map) {
                for (var i = 0; i < myMarkers.length; i++) {
                    myMarkers[i].setMap(map);
                }
            }

            function resetMapOrigin(){
              map.setZoom(2);
              map.setCenter({lat:52.4357808,lng:4.991315699999973});
            }
        });

    });

这是html中的初始化脚本：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAMNhLC5984PO876GF8nesnOqbiKkblvuBo&callback=initialize" async defer></script>

所以正在发生的事情是有时你打开网站并加载所有的针脚就好了。你点击刷新，它再次加载所有的针脚就好了。单击刷新，然后再次加载。点击刷新再次，它会抛出错误Uncaught ReferenceError: google is not defined(...)。你可以刷新多次，但仍会抛出错误。然后在刷新时突然点击它将加载所有引脚，没有错误。所以基本上有时它会起作用，有时它会给我一个错误。

我无法弄清楚发生了什么或为什么会这样做。

错误输入的行是var latLng = new google.maps.LatLng(data.latitude, data.longitude);（显然这是第一次“谷歌”调用）。

谁能告诉我为什么这样做？

顺便说一句，这是在开发服务器上，所以它不是在线直播。但它有时会起作用，有时会给我一个错误。

感谢您的帮助！

Answer 1

您使用Google Maps SDK的所有代码都需要在initialize函数中执行。在您的示例中，您可以在Google地图之前加载JSON，这就是您有时会收到错误的原因。

一种解决方案可能是将$.getJSON的回调移动到单独的函数，然后在初始化映射后触发请求。

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(52.4357808, 4.991315699999973),
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    // Fetch locations from the server
    $.getJSON("/pcc-common/static/pcc-locations.json", onLocationsFetched)
}

function onLocationsFetched(json) {
    myJSON=json1;
    $.each(json1, function(key, data) {
        ...

谷歌地图V3 - 没有定义获取错误谷歌

1 个答案: