1

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

谢谢！

这是所有部分的代码

控制器.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>
4

2 回答 2

0

在我看来，在使用闪电组件时直接操作 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}" />

我还建议您查看这个 Trailhead 项目：https ://trailhead.salesforce.com/en/projects/account-geolocation-app/steps/lc-app-06

于 2017-11-28T20:50:17.783 回答
0

因此，对于遇到此帖子的任何人。经过反复试验，我找到了解决方案。我利用了一些其他关于删除地图的答案。但是，由于 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);     

}
于 2017-08-31T16:05:31.150 回答