代码之家 › 专栏 › 技术社区 › sundus

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

zooming components leaflet salesforce popup

sundus · 技术社区 · 7 年前

问题是: 单击标记>&燃气轮机;单击地图(关闭弹出窗口)>&燃气轮机;放大和缩小>&燃气轮机;每个缩放步骤都会显示此错误:

null抛出/resource/1498411629000/传单/传单。js:9:10763

这是组件javascript helper中的代码:

 ({
        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);
}

问题出在哪里?请帮忙

3 回复 | 直到 7 年前

ChinaSen 3 年前

这是Vue3的一个新错误,我已经解决了: 将Proxy'map更改为toRaw(map),如下所示:

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

sundus 7 年前

我通过编辑传单解决了这个问题。js文件: 并用条件包装代码:

if(this._map)

因此,如果_map为null,则跳过

xwild 4 年前

在我的例子中,它与框架变量包装器(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 框架外的变量,换句话说,对小叶结构使用全局变量。