Salesforce学习 GoogleMaps（二）【LightningWebComponents＜LWC＞】

上一篇使用的是VisualforcePage，Salesforce学习 GoogleMaps（一）【VisualforcePage】，今天试着使用Lwc，来获取AccountObject的位置情报信息。

Step1:LightningWebComponents做成

lightningMapExampleForLwc.html

代码语言：javascript复制

<template>
  <lightning-map
      map-markers={mapMarkers}
      selected-marker-value={selectedMarkerValue}
      markers-title="account list"
      onmarkerselect={handleMarkerSelect}
      list-view="auto">
  </lightning-map>
</template>

lightningMapExampleForLwc.js

代码语言：javascript复制

import { LightningElement, track, wire } from 'lwc';

// getAccounts メソッドのインポート
import getAccounts from '@salesforce/apex/LightningMapExampleController.getAccounts';

export default class LightningMapExampleForLwc extends LightningElement {
    // 表示するマーカーのリスト
    @track
    mapMarkers=[];

    // 選択しているマーカーの値
    @track
    selectedMarkerValue;

    // 取引先を取得して表示するマーカーを作成
    @wire(getAccounts, {})
    wiredAccounts({ data }) {
        if (data) {
            var markers = [];
            for(var i = 0; i < data.length; i  ){
                var acc = data[i];
                markers.push({
                    location: {
                        Country : acc.BillingCountry,
                        State : acc.BillingState,
                        City: acc.BillingCity,
                        Street: acc.BillingStreet
                    },

                    icon : "standard:account",
                    value: acc.Id,
                    title: acc.Name,
                    description: acc.Description
                });
            }
            this.mapMarkers = markers;
        }
    }

    // マーカー選択時のアクション
    handleMarkerSelect(event) {
        console.log(event.target.selectedMarkerValue);
    }
}

LightningMapExampleController.cls

代码语言：javascript复制

public with sharing class LightningMapExampleController {
    @AuraEnabled(cacheable=true)
    public static List<Account> getAccounts(){
        return [SELECT Id, Name, BillingCountry, BillingState, BillingCity, BillingStreet, Description
                FROM Account
                WHERE BillingCity != NULL AND BillingStreet != NULL LIMIT 10];
    }
}

效果展示：

html salesforce web

0 人点赞