Leaflet 帐户页上Lightning组件中的传单地图

我是lightning组件的新手，我正在尝试开发一个传单地图组件，该组件将显示在帐户页面上。当我第一次单击帐户记录时，我得到“映射已初始化”错误。如果我刷新页面，它可以正常加载。然后，如果我点击退出并返回到同一个帐户，它就会工作。但点击另一个帐户会引发与以前相同的错误。我已尝试动态添加贴图容器，并尝试删除贴图容器。任何建议都很好

谢谢

这是所有部件的代码

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
})

({
LoadAllClient:函数（组件、映射）{
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（此，函数（响应）{
var state=response.getState（）；
console.log（状态）；
var objects=response.getReturnValue（）；
如果（状态==“成功”）{
如果（对象！=null）{
对于（var i=0；i所以对于任何看到这篇文章的人来说。经过一些尝试和错误，我找到了我的解决方案。我使用了我看到的关于删除映射的一些其他答案。但是由于组件.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);     

}

因此，对于任何看到这篇文章的人来说，经过一些尝试和错误，我找到了我的解决方案。我使用了我看到的关于删除映射的一些其他答案。但是，由于.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);     

}

在我看来，在使用lightning组件时直接操作DOM并不是一个好的做法。当然，在某些情况下，没有其他方法可以做到这一点，但事实并非如此。下面是另一个使用aura属性存储地图的解决方案

属性：

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

要在组件初始化时调用方法，请执行以下操作：

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

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

在我看来，在使用lightning组件时直接操作DOM并不是一种好的做法。当然，在某些情况下，没有其他方法可以做到这一点，但事实并非如此。下面是另一种使用aura属性存储地图的解决方案

属性：

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

要在组件初始化时调用方法，请执行以下操作：

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

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

我将版本设置回39，以防它是locker服务，但这不起作用。我尝试查找映射并使用“var map=component.get（“v.map”）；if（map）{map.remove（）；}将其删除-但似乎component.get从未返回映射。但是，在我尝试新建L.map的地方，有几行代码失败，出现了错误。我将版本设置回39，以防它是locker服务，但这不起作用。我尝试查找映射并使用“var map=component.get（“v.map”）；if（map）{map.remove（）；}将其删除-但似乎component.get从未返回映射。但在我尝试新建L.map的几行下，它失败了，出现了错误。感谢您的回复。不幸的是，项目被废弃，因此我无法测试它。感谢您的回复。不幸的是，项目被废弃，因此我无法测试它。