Google 地图 API，加载时挂起 Onion.js（昨天开始）

Question

不确定 API 中是否发生了某些变化，但从昨天开始，在加载多个标记时，我的所有演示和超过 5000 个买家网站在加载 onion.js 时挂起在浏览器开发工具的网络选项卡中查看。

这是我一直用来完成加载和显示多个标记的所有繁重工作的脚本，具有自定义信息窗口和集群。每当我把它拿出来时，网站就不会挂起，但当然它不会在地图上显示标记，我的不使用此脚本的单标记地图加载得很好。

我知道一定是我在这个文件中使用的东西导致了这个问题，我搜索了但找不到 Google 自己关于任何更改的任何更新，非常感谢任何帮助!

最小、完整且可验证的示例 （ct.mapping.js 被注释掉，否则页面将无法加载，取消注释以查看问题）：

http://contempothemes.com/re7-dev/map-test/index.html

具有多个标记的搜索结果（无效）：

http://wordpressmu-96733-274081.cloudwaysapps.com/re7-dev/?search-listings=true

单标记图（有效）：

http://wordpressmu-96733-274081.cloudwaysapps.com/re7-dev/listings/escada-apartments/

这是 ct.mapping.js 文件：

/**
* Contempo Mapping
*
* @package WP Pro Real Estate 7
* @subpackage JavaScript
*/

var estateMapping = (function () {
var self = {},
    marker_list = [],
    current_marker = 0,
    open_info_window = null,
    x_center_offset = 0, // x,y offset in px when map gets built with marker bounds
    y_center_offset = 0,
    x_info_offset = -0, // x,y offset in px when map pans to marker -- to accomodate infoBubble
    y_info_offset = -180;

function build_marker(latlng, property) {

    var mapPin = '';
    if(property['commercial'] == 'commercial') {
        var mapPin= property.siteURL+'/images/map-pin-com.png';
    } else if(property['land'] == 'land') {
        var mapPin= property.siteURL+'/images/map-pin-land.png';
    } else {
        var mapPin= property.siteURL+'/images/map-pin-res.png';
    }

    var marker = new google.maps.Marker({
        map: self.map, 
        animation: google.maps.Animation.DROP,
        draggable: false,
        flat: true,
        icon: mapPin,   
        position: latlng
    });

    marker_list.push(marker);

    self.bounds.extend(latlng);
    self.map.fitBounds(self.bounds);
    self.map.setCenter(convert_offset(self.bounds.getCenter(), x_center_offset, y_center_offset));

    var residentialString = '';
    if(property['commercial'] != 'commercial') {
        var residentialString=''+property.bed+' | '+property.bath+' | ';
    }

    if(property['contactpage'] == 'contactpage') {

        if(property['thumb'] != '') {

            var contentString =
            '<div class="infobox">'+
            '<div class="info-image"'+
                '<figure>'+
                    '<img src="'+property.thumb+'" height="250" width="250" />'+
                '</figure>'+
            '</div>'+
            '<div class="listing-details">'+
                '<header>'+
                    '<h4 class="marT0">'+property.title+'</h4>'+
                '</header>'+
                '<p class="price marB0"><strong><a href="//maps.google.com/maps?daddr='+property.street+'" target="_blank">Driving Directions</a></strong></p>'+
            '</div>';

        } else {

            var contentString =
            '<div class="infobox">'+
            '<div class="listing-details">'+
                '<header>'+
                    '<h4 class="marT0">'+property.title+'</h4>'+
                '</header>'+
                '<p class="price marB0"><strong><a href="//maps.google.com/maps?daddr='+property.street+'" target="_blank">Driving Directions</a></strong></p>'+
            '</div>';

        }

    } else {

        var contentString =
        '<div class="infobox">'+
        '<div class="info-image"'+
            '<figure>'+
                '<a href="'+property.permalink+'">'+
                    property.thumb+
                '</a>'+
            '</figure>'+
        '</div>'+
        '<div class="listing-details">'+
            '<header>'+
                '<h4 class="marT5 marB0"><a href="'+property.permalink+'">'+property.title+'</a></h4>'+
                '<p class="location muted marB5">'+property.city+', '+property.state+'&nbsp;'+property.zip+'</p>'+
            '</header>'+
            '<p class="price marB0"><strong>'+property.fullPrice+'</strong></p>'+
        '</div>';

    }

    var imagesURL = property.siteURL;

    var infobox = new InfoBox({
        content: contentString,
        disableAutoPan: true,
        maxWidth: 0,
        alignBottom: true,
        pixelOffset: new google.maps.Size( -125, -64 ),
        zIndex: null,
        closeBoxMargin: "8px 0 -20px -20px",
        closeBoxURL: imagesURL+'/images/infobox-close.png',
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    });

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

        if(open_info_window) open_info_window.close();


            infobox.open(self.map, marker);
            self.map.panTo(convert_offset(this.position, x_info_offset, y_info_offset));
            open_info_window = infobox;

    });
}

// Next/Previous Marker Navigation

var ct_map_next = function() {
    current_marker++;
    if (current_marker > marker_list.length){
        current_marker = 1;
    }
    while(marker_list[current_marker-1].visible === false) {
        current_marker++;
        if(current_marker > marker_list.length) {
            current_marker = 1;
        }
    }
    google.maps.event.trigger(marker_list[current_marker-1], 'click');
}

var ct_map_prev = function() {
    current_marker--;
    if (current_marker < 1) {
        current_marker = marker_list.length;
    }
    while(marker_list[current_marker-1].visible === false) {
        current_marker--;
        if(current_marker > marker_list.length) {
            current_marker = 1;
        }
    }
    google.maps.event.trigger(marker_list[current_marker-1], 'click');
}

window.onload = function() {
    document.getElementById('ct-gmap-next').addEventListener('click',function () {
        ct_map_next();
    });

    document.getElementById('ct-gmap-prev').addEventListener('click',function () {
        ct_map_prev();
    });
}

function geocode_and_place_marker(property) {
   var geocoder = new google.maps.Geocoder();
   var address = property.street+', '+property.city+' '+property.state+', '+property.zip;

       //If latlong exists build the marker, otherwise geocode then build the marker
       if (property['latlong'] && property['latlong'].length>1) {
           var lat = parseFloat(property['latlong'].split(',')[0]),
                lng = parseFloat(property['latlong'].split(',')[1]);
            var latlng = new google.maps.LatLng(lat,lng);
            build_marker(latlng, property);

       } else {
           geocoder.geocode({ address : address }, function( results, status ) {
               if(status == google.maps.GeocoderStatus.OK) {
                    var latlng = results[0].geometry.location;
                    build_marker(latlng, property);
                }
            });
        }
}

function init_canvas_projection() {
    function CanvasProjectionOverlay() {}
    CanvasProjectionOverlay.prototype = new google.maps.OverlayView();
    CanvasProjectionOverlay.prototype.constructor = CanvasProjectionOverlay;
    CanvasProjectionOverlay.prototype.onAdd = function(){};
    CanvasProjectionOverlay.prototype.draw = function(){};
    CanvasProjectionOverlay.prototype.onRemove = function(){};

    self.canvasProjectionOverlay = new CanvasProjectionOverlay();
    self.canvasProjectionOverlay.setMap(self.map);
}

function convert_offset(latlng, x_offset, y_offset) {
    var proj = self.canvasProjectionOverlay.getProjection();
    var point = proj.fromLatLngToContainerPixel(latlng);
    point.x = point.x + x_offset;
    point.y = point.y + y_offset;
    return proj.fromContainerPixelToLatLng(point);
}

self.init_property_map = function (properties, defaultmapcenter) {

    if(ctMapGlobal['mapStyle'] != 'default') {
        var options = {
            zoom: 10,
            center: new google.maps.LatLng(defaultmapcenter.mapcenter),
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            disableDefaultUI: false,
            scrollwheel: false,
            streetViewControl: true,
            styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#acbcc9"}]},{"featureType":"landscape","stylers":[{"color":"#f2e5d4"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#c5c6c6"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#e4d7c6"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#fbfaf7"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#c5dac6"}]},{"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]},{"featureType":"road"},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{},{"featureType":"road","stylers":[{"lightness":20}]}]
        };
    } else {
        var options = {
            zoom: 10,
            center: new google.maps.LatLng(defaultmapcenter.mapcenter),
            mapTypeId: google.maps.MapTypeId.ROADMAP, 
            disableDefaultUI: false,
            scrollwheel: false,
            streetViewControl: true
        };
    }

    /* Marker Clusters */
    var markerClustererOptions = {
        ignoreHidden: true,
        maxZoom: 14,
        styles: [{
            textColor: '#ffffff',
            url: property.siteURL+'/images/cluster-icon.png',
            height: 48,
            width: 48
        }]
    };

    self.map = new google.maps.Map( document.getElementById( 'map' ), options );
    self.bounds = new google.maps.LatLngBounds();
    init_canvas_projection();

    //wait for idle to give time to grab the projection (for calculating offset)
    var idle_listener = google.maps.event.addListener(self.map, 'idle', function() {
        for (i=0;i<properties.length;i++) {
            geocode_and_place_marker(properties[i]);
        }
        var markerCluster = new MarkerClusterer(self.map, marker_list, markerClustererOptions);
        google.maps.event.removeListener(idle_listener);
    });

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
            google.maps.event.trigger(map, 'resize');
        });
    });

}

return self;
}());

Answer 1

我们从昨天开始就遇到了同样的问题。根据 https://issuetracker.google.com/issues/35827696 , setting v=3.22 in https://maps.googleapis.com/maps/api/js?key=API_KEYv=3.22 修复它。

Google 地图 API，加载时挂起 Onion.js（昨天开始）

Google Maps API, Hangs when Loading Onion.js (Started Yesterday)

javascript

google-maps

google-maps-api-3

google-places-api

google-places