LWC SuperBadge Challenge 7船靠近我错误

Question

我的组件工作得很好，我可以看到它在UI中形成的地图和正确出现的标记都能正常工作，但我仍然会遇到以下挑战：

挑战尚未完成。。。以下是问题所在：在组件boatsNearMe JavaScript文件中找不到createMapMarkers((函数的正确设置。确保组件是根据要求创建的，包括正确的mapMarkers、title、Latitude(Geolocation__Latitude_s(、Longitude(Geolocation__Longitude_ss(、正确的常量、停止加载微调器，并使用正确的区分大小写和一致的引号。

这是根据线索标题的挑战7声明：

"建造组件船靠近我，并在您附近显示船使用浏览器位置和船只类型创建组件船只NearMe并显示用户附近的船只。在地图上显示它们，始终征得用户的同意(并且仅在页面打开时("https://trailhead.salesforce.com/en/content/learn/superbadges/superbadge_lwc_specialist

这是我的船NearMe LWC代码

import { LightningElement, 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;
mapMarkers = [];
isLoading = true;
isRendered = false;
latitude;
longitude;
@wire(getBoatsByLocation, { latitude: '$latitude', longitude: '$longitude', boatTypeId: '$boatTypeId' })
wiredBoatsJSON({ error, data }) {

if (data) {
this.isLoading = true;
this.createMapMarkers(JSON.parse(data));

} else if (error) {
this.dispatchEvent(
new ShowToastEvent({
title: ERROR_TITLE,
message: error.body.message,
variant: ERROR_VARIANT
})
);
// this.isLoading = false;
}
}
getLocationFromBrowser() {
navigator.geolocation.getCurrentPosition(
position => {
this.latitude = position.coords.latitude;
this.longitude = position.coords.longitude;
},
(error) => {}
);
}
createMapMarkers(boatData) {
const newMarkers = boatData.map((boat) => {
return {
location: {
Latitude: boat.Geolocation__Latitude__s,
Longitude: boat.Geolocation__Latitude__s
},
title: boat.Name,
};
});
newMarkers.unshift({
location: {
Latitude: this.latitude,
Longitude: this.longitude
},
title: LABEL_YOU_ARE_HERE,
icon: ICON_STANDARD_USER
});
this.mapMarkers = newMarkers;
this.isLoading = false;
}
renderedCallback() {
if (this.isRendered == false) {
this.getLocationFromBrowser();
}
this.isRendered = true;
}
}

Answer 1

我想你在这个部分有两次Geolocation__Latitude__s：

createMapMarkers(boatData) {
const newMarkers = boatData.map((boat) => {
return {
location: {
Latitude: boat.Geolocation__Latitude__s,
Longitude: boat.Geolocation__Latitude__s // <<-- should be Longitude
},
title: boat.Name,
};
});