时间戳

首页 > 解决方案 > LWC SuperBadge Challenge 7 船NearMe 错误

salesforce - LWC SuperBadge Challenge 7 船NearMe 错误

问题描述

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

挑战尚未完成... 问题出在：我们在组件boatsNearMe JavaScript 文件中找不到 createMapMarkers() 函数的正确设置。确保组件是根据要求创建的，包括正确的 mapMarkers、标题、纬度 (Geolocation__Latitude__s)、经度 (Geolocation__Longitude__s)、正确的常量、停止加载微调器以及使用正确的区分大小写和一致的引用。

这是根据线索的挑战 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;
    }
}

标签： salesforcelwc

解决方案

我认为你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,
            };
        });

推荐阅读