TypeError：無法在字符串“無法加載地圖”上創建屬性“ mapTypeId”

Question

我試圖了解並調試我不斷進入控制台的錯誤。 我正在流星項目上實現Google地圖。 我正在使用dburles:google-maps和mdg:geolocation

我不斷看到TypeError: Cannot create property 'mapTypeId' on string at Object.create google-maps TypeError: Cannot create property 'mapTypeId' on string錯誤TypeError: Cannot create property 'mapTypeId' on string這是來自dburles:google-maps包的令人反感的代碼行

  create: function(options) {
    // default to Map
    var type = options.type ? options.type : 'Map';
    if (! _.include(supportedTypes, type)) {
      throw new Meteor.Error("GoogleMaps - Invalid type argument: " + type);
    }

    this._create(options.name, {
      type: type,
      instance: new google.maps[type](options.element, options.options), //<= [ERROR] here
      options: options.options
    });

該錯誤與我如何在模板上創建地圖有關嗎？ 我可以看到地圖，我只是想了解錯誤。

我的代碼：

map.tpl.jade

section.section--map 
    .section--map__bgImage
    .section--map__content
        h1.section--map__title Frit.kots available right now
        .section--map__container
            unless geolocationError
                +googleMap(type='Map' name='map' options=mapOptions)
            else
                | Geolocation failed: {{geolocationError}}
+footer

map.js

import './map.tpl.jade';


// [FIX-ME]: This part of the code must be fixed

Meteor.startup( () => {
    GoogleMaps.load({
        v: '3',
        key: 'MY_API_KEY'
        // libraries: 'places'
    });
})


// onCreated
Template.map.onCreated( function() {

    let self = this;
    let MAP_ZOOM =  15;
    let loadedMap = GoogleMaps.loaded();

    console.log('Creating the map');
    console.log(`These are the map vars: ${MAP_ZOOM} && ${loadedMap}`);

    GoogleMaps.ready('map', (map) => {

        let marker;

        // Create and move marker when latLng changes
        self.autorun( () => {
            let latLng = Geolocation.latLng;

            if (!latLng) {
                return;
            }

            // if marker doesn't exist, create one
            if (! marker) {
                marker = new google.maps.Marker({
                    // position: new google.maps.LatLng(latLng.lat, latLng.lng),
                    position: map.options.center,
                    map: map.instance
                });
            // if marker already exists, change its position
            } else {
                marker.setPosition(latLng);
            }
            // Center and zoom the map view into
            map.instance.setCenter(marker.getPosition());
            map.instance.setZoom(MAP_ZOOM);
        })
    })
});


// Helpers
Template.map.helpers({
    geolocationError: () => {

        let error = Geolocation.error();
        console.log(`This is the error message: ${error}.message`);
        return error && error.message;
    },
    mapOptions: () => {
        let latLng = Geolocation.latLng();
        let loadedMap = GoogleMaps.loaded();
        let MAP_ZOOM = 15;

        // Initialize the map once 
        if (loadedMap && latLng) {
            return {
                center: new google.maps.LatLng(latLng.lat, latLng.lng),
                zoom: MAP_ZOOM
            }
        } else {
            return 'Unable to load the map';
        }
    }
});

Answer 1

  instance: new google.maps[type](options.element, options.options)

我認為數據結構中有錯誤。 仔細檢查google.maps上的文檔，確保您正在構造調用權，並且該類型是正確方法的正確參數。