Question

我是闪电组件的新手，我正在尝试开发一个将在帐户页面上显示的传单地图组件。当我第一次点击一个帐户记录时，我得到了＃34; Map已经初始化＆＃34;错误。如果我刷新页面它加载正常。然后，如果我点击并返回到相同的帐户，它的工作原理。但是点击另一个帐户会发出与以前相同的错误。我已尝试动态添加地图容器，并且我已尝试删除地图容器。任何建议都会很棒。

谢谢！

以下是所有部分的代码

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

在帐户页面上的Lightning组件中的Leaflet Map

2 个答案: