我在 LWC 专家超级徽章挑战中遇到错误：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()在组件boatsNearMe JavaScript 文件中找不到该函数的正确设置。确保组件是按照要求创建的，包括正确的mapMarkers、标题、纬度( Geolocation__Latitude__s)、经度( Geolocation__Longitude__s)、正确的常量、停止加载微调器、使用正确的大小写敏感和一致的引用。