Я столкнулся с ошибкой в LW C Specialist Superbadge Challenge: 7
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 = JSON.parse(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;
}
}
<template>
<lightning-card class="slds-is-relative">
<template if:true={isLoading}>
<lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>
</template>
<!-- The lightning-map goes here -->
<template if:true={isRendered}>
<lightning-map map-markers={mapMarkers}> </lightning-map>
</template>
<div slot="footer">Top 10 Only!</div>
</lightning-card>
</template>
Задача еще не завершена ... вот что не так: мы не можем найти правильные настройки для функции createMapMarkers () в компоненте boatNearMe JavaScript файл. Убедитесь, что компонент был создан в соответствии с требованиями, включая правильные mapMarkers, заголовок, широту (Geolocation__Latitude__s), долготу (Geolocation__Longitude__s), правильные константы, остановку загрузочного счетчика и использование правильной чувствительности к регистру и последовательной цитаты.
Любая помощь будет принята с благодарностью!