Question

我在salesforce闪电组件中创建了一个地图并在其上添加了标记，问题是：点击标记＆gt;＆gt;点击地图（关闭弹出窗口）＆gt;＆gt;放大和缩小＆gt;＆gt;每个缩放步骤显示此错误：

未捕获的TypeError：无法读取属性'_latLngToNewLayerPoint' null抛出/resource/1498411629000/leaflet/leaflet.js:9:10763

这是组件javascript助手中的代码：

 ({
        drawMap: function(component,map){

                var mapElement = component.find("map").getElement();
                map =  L.map(mapElement).setView([35.232, 40.5656], 12);
      L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
                {
                    attribution: 'Tiles © Esri'
                }).addTo(map);

            var markers = L.marker([35.232, 40.5656]).addTo(map);

                component.set("v.map", map);  
            component.set("v.markers", markers);

        },

        putMarkers: function(component) {
            var map = component.get('v.map');
            var markers = component.get('v.markers');
            var projects = component.get('v.projects');
            var projectsAction = component.get("c.getProjectsList");
            var markerArray = [];                  
            var symbol; 
var symbol1 = 'symbolURl';           
var symbol2 = 'symbolURl';

            projectsAction.setCallback(this, function(response) {
                var state = response.getState();
                 if( state == "SUCCESS"){
                     projects = response.getReturnValue();

                      if (markers) {
                markers.remove();
            }
            // Add Markers
            if (map && projects && projects.length> 0) {               
                for (var i=0; i<projects.length; i++) {
                    var project = projects[i];
                    if (project.Latitude && project.Longitude) {
                        var latLng = [project.Latitude, project.Longitude];
                        var currentStatus = project.status;
                           if(currentStatus=="status1")
                        symbol = symbol1;

                        else if(currentStatus=="status2")
                        symbol = symbol2;

                        var popupTemplate = '<b style="color:black; font-size:11px;">Project Name:</b><span style="float:right;margin-right:10px;color:#800000;font-size:11px;width:110px;text-align:right; white-space:normal;" > '+project.name;

                    var icon = new L.DivIcon({  
                        className:'',
                        html: '<img style="width:34px;height:37px;" src="'+symbol+'"/>'+
                        '<span style="font-weight:bold;font-size:9pt;">text</span>'
                                  });

                        var marker = L.marker(latLng, {project: project,icon:icon,title:project.name}).bindPopup(popupTemplate,{minWidth:200});
                        markerArray.push(marker);


                    }
                }
                L.layerGroup(markerArray).addTo(map);

                 component.set("v.map", map);  
            }}
                 else if(state == "ERROR"){
                    console.log('Error in calling server side action');
                }
            });

             $A.enqueueAction(projectsAction);
        }

并在javascript控制器中：

 jsLoaded: function(component, event, helper)  {
     var map = component.get("v.map");
         if (!map) {
        helper.drawMap(component,map);
        helper.putMarkers(component);
         }
},
    projectsChangeHandler: function(component, event, helper) {
    helper.putMarkers(component);
}

问题在哪里？请帮忙

Answer 1

我通过编辑leaflet.js文件解决了这个问题：搜索单词（_latLngToNewLayerPoint）并使用以下条件包装代码：

if(this._map)

因此，如果_map为null，请跳过

我不知道为什么这个错误只出现在salesforce中

Answer 2

就我而言，它与框架变量包装器（vue.js）有关。
当我像这样使用可观察变量时：

data() {
  return {
    map: null,
  };
},

mounted() {
  // here it's required to use a global variable 
  // or a variable without framework handlers
  // map = L.map(...);

  this.map = L.map('map', { preferCanvas: true }).setView([51.505, -0.09], 13);
}

出现错误：

Popup.js:231 Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of null
    at NewClass._animateZoom (Popup.js:231)
    at NewClass.fire (Events.js:190)
    at NewClass._animateZoom (Map.js:1689)
    at NewClass.<anonymous> (Map.js:1667)

解决方案只是在框架外定义 map 变量，换句话说，对传单结构使用全局变量。

关闭弹出窗口后缩放时的传单错误

2 个答案: