Question

我有一个奇怪的问题。我想在我正在工作的网站上显示Google地图。我使用包含html代码和我的initMap和createMap功能的map.php，使用Map类和一个名为class.map.js的文件中的构造函数来创建地图。

网页似乎像class.map.js一样不断加载，控制台中没有错误，控制台中的重复项是放置在构造函数中的console.log（“ repet”），表明该类.map.js正在执行某种循环。有任何线索吗？




 // Class to store the maps functions
 // @class Map


class Map {

    constructor(googleApiKey, locale, lat, lng, latLngRef, filter, geo) {
        ///////////////////////// <- VARIABLES -> ////////////////////////////////
        /////////////////////////////////////////////////////////////////////////
        /*The global parameters */
        this.googleApiKey = googleApiKey; // The Api key

        // locale ? this.locale = locale.split('_')[0] : this.locale = 'fr';

        this.locale = 'fr';
        // locale.split('_')[0]; // The country

        this.filter = filter; // the filter above the IM
        this.defaultZoomLevel = 13;

        this.boolZoomDisplay = true;
        // Used by refreshData to determine if a displayData() is needed

        this.isGeo = geo; // == true if the geolocation is available; else == false

        // If geo == true : lat / lng = My current position
        // else : lat / lng = the ref ground position (or NaN if there isn't any)

        this.lat = lat;
        this.lng = lng;
        this.latLng = {lat: lat, lng: lng};
        this.latLngRef = latLngRef; // User ref ground geoloc, can value NaN

        this.countryLatLng = {lat: 48.6, lng: 2.3};
        console.log("repet")
        // The coordinate of the country
        // if the navigator object is available we set the countryLatLng value to the value obtained by a text file
        // if(navigator.language != null){
        //     let pays = navigator.language.split('-')[1];
        //     // Do a $.ajax, and not a $.JSON, to make the call not asynchronous
        //     let _latLng;
        //     $.ajax({
        //         url: "countryCoordinates.json",
        //         dataType: 'json',
        //         async: false,
        //         success: function(data) {
        //             let obj = data[pays] || data['FR'];
        //             let lat = obj['lat'];
        //             let lng = obj['lng'];
        //             // let lat = 48.6;
        //             // let lng = 2.3;

        //             _latLng = {lat: lat, lng: lng};

        //         }
        //     });

        //     this.countryLatLng = _latLng;
        // }


        this.markersArray = []; // Contains all the markers already created
        this.newMarkers = []; // Contains all the markers undisplayed
        this.mouseDownPos = null; // used for the workaround to disable the click event onscroll


        // The currently opened infoWindow
        this.selectedInfoWindow = new google.maps.InfoWindow({});


        // Temporary marker (to creat a new ground)
        this.tempMarker;

        // == True if the click is on a cluster; else == false
        this.clusterClicked = false;

        // Configuration du style de la carte : https://snazzymaps.com 
        this.styles = [
            { "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#333333" }, { "lightness": 40 }] },
            { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#ffffff" }, { "lightness": 16 }] },
            { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] },
            { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#fefefe" }, { "lightness": 20 }] },
            { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#fefefe" }, { "lightness": 17 }, { "weight": 1.2 }] },
            { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }, { "lightness": 20 }] },
            { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#f5f5f5" }, { "lightness": 21 }] },
            { "featureType": "poi.park", "elementType": "geometry", "stylers": [{ "color": "#dedede" }, { "lightness": 21 }] },
            { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "color": "#858585" }] },
            { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "lightness": 17 }] },
            { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "color": "#ffffff" }, { "lightness": 29 }, { "weight": 0.2 }] },
            { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 18 }] },
            { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] },
            { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#ffffff" }, { "lightness": 16 }] },
            { "featureType": "road.local", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] },
            { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#f2f2f2" }, { "lightness": 19 }] },
            { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#e9e9e9" }, { "lightness": 17 }] },
            { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#c7c7c7" }] }
        ];

        // generate clusterStyles
        // probably better to move clusterStyles and mcOptions
        let clusterStyles = [
            {
                textColor: 'white',
                url: 'assets/img/ui/m1.png',
                width: 55,
                height: 54,
            },
            {
                textColor: 'white',
                url: 'assets/img/ui/m2.png',
                width: 58,
                height: 57,
            },
            {
                textColor: 'white',
                url: 'assets/img/ui/m3.png',
                width: 68,
                height: 67,
            },
            {
                textColor: 'white',
                url: 'assets/img/ui/m4.png',
                width: 80,
                height: 79,
            },
            {
                textColor: 'white',
                url: 'assets/img/ui/m5.png',
                width: 92,
                height: 91,
            },
        ];

        this.mcOptions = {
            gridSize: 50,
            styles: clusterStyles,
            maxZoom: 12
        };

        // document.addEventListener('DOMContentLoaded', function() {
        this.map = new google.maps.Map(document.getElementById('map'), {

            styles: this.styles,

            // Default zoom value
            zoom: 11,
            minZoom: 1,
            streetViewControl: false, // Disables the street view ("Petit bonhomme jaune")
            gestureHandling: "greedy",

            zoomControl: true, // The 2 ('+' & '-') buttons that control the zoom
            fullscreenControl: false, // The button that controles the fullscreen
            });



        // Creates the marker clusterer
        this.markerClusterer = new MarkerClusterer(this.map);
        // })

Answer 1

所以我发现了错误，我的类Map的命名类似于Google提供的用于显示地图的构造函数。

谷歌地图不显示/不断加载js脚本

1 个答案: