Супер-значок специалиста по веб-компонентам Lightning: вызов 7

Question

У меня проблемы с решением задачи 7. У меня есть необходимый импорт, а также требуемые функции в файле JS. Тем не менее #Trailhead дает ошибку:

Мы не можем найти функцию getLocationFromBrowser() в контроллере компонента BoatsNearMe. Убедитесь, что компонент был создан в соответствии с требованиями, включая использование getCurrentPosition() для получения геолокации навигатора, обозначение стрелки с помощью position =>, получение координат из положения и присвоение их свойствам контроллера. "широта" и "долгота" с использованием правильной чувствительности к регистру.

Пожалуйста, найдите мой код здесь:

import { LightningElement, track, wire, api } from 'lwc';
import getBoatsByLocation from '@salesforce/apex/BoatDataService.getBoatsByLocation';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

const LABEL_YOU_ARE_HERE = 'You are here!';
const ICON_STANDARD_USER = 'standard:user';
const ERROR_TITLE = 'Error loading Boats Near Me';
const ERROR_VARIANT = 'error';
export default class BoatsNearMe extends LightningElement {
    @api boatTypeId;
    @track mapMarkers = [];
    @track isLoading = true;
    @track isRendered = false;
    latitude;
    longitude;
    @wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId' })
    wiredBoatsJSON({ error, data }) {
        if (data) {
            this.createMapMarkers(data);
        } else if (error) {
            this.dispatchEvent(
                new ShowToastEvent({
                    title: ERROR_TITLE,
                    message: error.body.message,
                    variant: ERROR_VARIANT
                })
            );
            this.isLoading = false;
        }
    }
    renderedCallback() {
        if (this.isRendered == false) {
            this.getLocationFromBrowser();
        }
        this.isRendered = true;
    }
    getLocationFromBrowser() {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                this.latitude = position.coords.latitude;
                this.longitude = position.coords.longitude;
            },
            (e) => {

            }, {
            enableHighAccuracy: true
        }
        );
    }
    createMapMarkers(boatData) {
        this.mapMarkers = boatData.map(rowBoat => {
            return {
                location: {
                    Latitude: rowBoat.Geolocation_Latitude_s,
                    Longitude: rowBoat.Geolocation_Longitude_s
                },
                title: rowBoat.Name,
            };
        });
        this.mapMarkers.unshift({
            location: {
                Latitude: this.latitude,
                Longitude: this.longitude
            },
            title: LABEL_YOU_ARE_HERE,
            icon: ICON_STANDARD_USER
        });
        this.isLoading = false;
    }
}

Я думаю, это то, чего я упускаю в коде.

Answer 1

В ваших ссылках на широту и долготу геолокации отсутствует знак "_"

У вас они такие (одиночные подчеркивания);

rowBoat.Geolocation_Latitude_s

И это должно быть так (двойное подчеркивание);

rowBoat.Geolocation__Latitude__s

Я не просмотрел весь код, но, по крайней мере, они выглядят неправильно в вашем коде. Кроме того, не уверен, что@track явно требуется в этом случае (больше).

Answer 2

Код подтверждения крайне разборчив. Если убрать круглые скобки вокруг позиции слова, думаю, это сработает.

Answer 3

Вы можете попробовать 2 изменения, чтобы пройти испытание,

1. удалите круглые скобки вокруг позиции из функции обратного вызова getCurrentPosition

2. выполните следующие действия, чтобы исправить код создания mapMarkers. Данные, которые передаются в createMapMarkers имеет формат ниже,

   '[{"attributes": {"type": "Boat__c", "url": "/ services / data / v48.0 / sobjects / Boat__c / a022w000006RA28AAG"}, "Name": "Sanya", "Geolocation__Latitude__s": 24.8513290, "Geolocation__Longitude__s": 119.4862410, "Id": "a022w000006RA28AAG"}, {"attributes": {"type": "Boat__c", "url": "/ services / data / v48.0 / sobjects / Boat__c / a022w000006RA2DAAW "}," Имя ":"Longxue","Geolocation__Latitude__s":22.6216820,"Geolocation__Longitude__s":113.7630620,"Id":"a022w000006RA2DAAW"}]'

Итак, вы можете проанализировать его с помощью JSON.parse(boatData), а затем вызвать на нем функцию map(),

this.mapMarkers = JSON.parse(boatData).map((rowBoat) => {
  return {
    location: {
      Latitude: rowBoat.Geolocation__Latitude__s,
      Longitude: rowBoat.Geolocation__Longitude__s
    },
    title: rowBoat.Name
  };
});

И обязательно используйте двойное подчеркивание для доступа к широте и долготе из геолокации, как показано выше.

Еще один момент: установите для isLoading значение true непосредственно перед созданием mapMarkers и установите для него значение false после его создания в методе createMapMarkers.

Надеюсь, это сработает для вас:)