帳戶頁面上閃電組件的小冊子地圖

Question

我是閃電組件的新手，我正在嘗試開發將在帳戶頁面上顯示的小冊子地圖組件。當我第一次點擊帳戶記錄時，我收到「地圖已經初始化」的錯誤。如果我刷新頁面，它加載正常。然後，如果我點擊並返回到相同的帳戶，它的作品。但是，點擊另一個帳戶會引發與以前相同的錯誤。我試着動態地添加地圖容器，並試圖刪除地圖容器。任何建議都會很棒。

謝謝！

這裏是所有的作品的代碼

controller.js

({ 
jsLoaded: function(component, event, helper) { 
    var recType = component.get("v.branch.fields.RecordTypeId.value"); 
    var action = component.get("c.getBranch"); 
    action.setParams({'recID' : component.get("v.recordId"), 
         'recordTypeID' : recType}); 
    action.setCallback(this,function(response){ 
     var state = response.getState(); 
     if(state === "SUCCESS"){ 
     var branch = response.getReturnValue(); 
     helper.buildmap(component,branch); 
     } 
    }); 
    $A.enqueueAction(action); 
}, 

//future code goes here 
}) 

helper.js：

({ 
loadAllClients: function(component,map){ 
    var action = component.get("c.findAll"); 
    var recType = component.get("v.branch.fields.RecordTypeId.value"); 
    action.setParams({'recID' : component.get("v.recordId"), 
         'recordTypeID' : recType}); 
    action.setCallback(this,function(response){ 
     var state = response.getState(); 
     console.log(state); 
     var objects = response.getReturnValue(); 
     if(state === "SUCCESS"){ 
      if(objects != null){ 
      for (var i=0; i<objects.length; i++) { 
      var singleRec = objects[i]; 
      var url = '/' + singleRec.recID; 
      var popup = '<a href=' + url + '>' +singleRec.Name+'</a>'; 
      var latLng = [singleRec.Latitude, singleRec.Longitude]; 
      L.marker(latLng, {account: singleRec}).addTo(map) 
      .bindPopup(popup); 
      } 
      } 
     } 
    }); 
    $A.enqueueAction(action); 
}, 
buildmap: function (component,branch){ 
    var lat = branch.BillingLatitude; 
    var long = branch.BillingLongitude; 
    var map = new L.map('map'); 
    map.setView(new L.LatLng(lat,long), 8); 
    setTimeout(function() { 
     L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa'; 
     var redMarker = L.AwesomeMarkers.icon({icon : 'home',markerColor: 'red'}); 
     var radius = 80467.2; 
     L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', 
     { 
      attribution: 'Tiles © Esri' 
     }).addTo(map); 
     L.marker([lat,long],{icon:redMarker}).addTo(map) 
     .bindPopup(branch.Name); 
     L.circle([lat,long], radius).addTo(map); 
    }); 
    this.loadAllClients(component,map);  
},//future code goes here 
}) 

組件：

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="AccountController"> 
<aura:attribute name="branch" type="account"/> 
<aura:attribute name="recordId" type="Id" /> 
<aura:attribute name="accounts" type="object[]" /> 

<ltng:require styles="/resource/leaflet/leaflet.css" /> 
<ltng:require styles="/resource/fontawesome/font-awesome-4.7.0/css/font-awesome.min.css"/> 
<ltng:require styles="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css"/> 
<ltng:require styles="/resource/leaflet/leaflet.awesome-markers.css"/> 
<ltng:require scripts="/resource/leaflet/leaflet.js,/resource/leaflet/leaflet.awesome-markers.js" 
     afterScriptsLoaded="{!c.jsLoaded}" /> 

<force:recordData aura:id="branchservice" 
       recordId="{!v.recordId}" 
       targetRecord="{!v.branch}" 
       fields="Name,RecordTypeId" /> 

    <div id="map"></div> 
</aura:component> 

Answer 1

因此，對於任何人誰遇到這個帖子。隨着一些試驗和錯誤，我發現我的解決方案。我利用了我看到的有關刪除地圖的其他一些答案。然而，由於component.get（「v.map」）不起作用，我需要使用document.getElementById（'map'），它找到了地圖並允許我移除它，然後重新初始化它。對於buildMap函數中的新代碼是：

buildmap: function (component,branch){ 
    var lat = branch.BillingLatitude; 
    var long = branch.BillingLongitude; 
    var map; 
    try{ 
     map = new L.map('map'); 
    }catch(err){ 
     console.log(err); 
     map = document.getElementById('map'); 
     map.remove(); 
     map = new L.map('map') 
    } 
     map.setView(new L.LatLng(lat,long), 8); 
     setTimeout(function() { 
      L.AwesomeMarkers.Icon.prototype.options.prefix = 'fa'; 
      var redMarker = L.AwesomeMarkers.icon({icon : 'home',markerColor: 'red'}); 
      var radius = 80467.2; 
      L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}', 
      { 
      attribution: 'Tiles © Esri' 
      }).addTo(map); 
      L.marker([lat,long],{icon:redMarker}).addTo(map) 
      .bindPopup(branch.Name); 
      L.circle([lat,long], radius).addTo(map); 
     }); 
     this.loadAllClients(component,map);  

} 

Answer 2

在我看來是不具有防雷擊元件工作時直接操作DOM一個很好的做法。當然，有些情況下沒有其他方法可以做到，但事實並非如此。接下來是另一種使用aura屬性來存儲地圖的解決方案。

屬性：

<aura:attribute name="map" type="Object" access="private"/> 

那麼我建議你添加調用下面的代碼，當組件初始化後腳本初始化：

var map = component.get("v.map"); 

//Check if initialized 
if(this.isNull(map)){ 
    map = new L.map('map'); 
    component.set("v.map", map); 
} 

來調用組件的初始化的方法：

<aura:handler name="init" value="{!this}" action="{!c.doInit}" access="private" /> 

調用腳本初始化方法：

<ltng:require scripts="/resource/leaflet/leaflet.js" 
      afterScriptsLoaded="{!c.jsLoaded}" /> 

此外，我建議你看看這個入口處項目：https://trailhead.salesforce.com/en/projects/account-geolocation-app/steps/lc-app-06