LWC SuperBadge Challenge 7 boatsNearMe 错误

Question

我的组件工作正常，我可以看到它在 UI 中形成的地图和正确出现的标记中正常工作，但是我仍然遇到这个挑战的错误：

挑战尚未完成...这是错误的地方：我们无法在组件 boatsNearMe JavaScript 文件中找到 createMapMarkers() 函数的正确设置。确保组件是根据要求创建的，包括正确的地图标记、标题、纬度 (Geolocation__Latitude__s)、经度 (Geolocation__Longitude__s)、正确的常量、停止加载微调器以及使用正确的 case-sensitivity和一致的引用。

这是根据 trailhead 提出的挑战 7 声明：

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

这是我的 boatsNearMe 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,
            };
        });

LWC SuperBadge Challenge 7 boatsNearMe 错误

LWC SuperBadge Challenge 7 boatsNearMe Error

salesforce

lwc