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

Question

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

Uncaught TypeError: Cannot read property '_latLngToNewLayerPoint' of null throws at /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变量，换句话说，为传单结构使用全局变量。

Answer 3

这是Vue3的一个新bug，我已经解决了：将 Proxy'map 更改为 toRaw(map)，如下所示：

L.geoJSON(geoJson, {
      style: {
        color: '#ff0000',
        fillColor: "#ff000000",
        weight: 1
      },
      onEachFeature: myonEachFeature,
    }).addTo(toRaw(map))

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

Leaflet error when zoom after close popup

components

popup

salesforce

zooming

leaflet