更改标记图标并关闭弹出消息答案

【问题标题】：Change marker icon and a pop-up message closes更改标记图标并关闭弹出消息
【发布时间】：2016-02-11 17:57:34
【问题描述】：

我正在使用 leaflet.awesome-markers 卡片标记。当您更改图标的颜色时，它会立即关闭弹出消息。

是否可以在不关闭弹窗的情况下更改颜色？

$scope.$on('leafletDirectiveMarker.viewMap.click', function(e, args){
    $scope.selectedPoint = $scope.points.filter( function(spoint){ return spoint._id ===  args.modelName; })[0];
    $scope.waypoints[$scope.selectedPoint._id].icon.markerColor = 'green'; 
});

【问题讨论】：

你能做个小提琴吗？
即使在示例tombatossals.github.io/angular-leaflet-directive/examples/…中也可以观察到这一点
如果你做一个 e.preventDefault();在 $scope.selectedPoint 之前？
也应用此决定 (e.preventDefault();) 并无济于事。但问题不在此事件中 - 在不更改标记的情况下无法观察到问题。

标签： angularjs leaflet angular-leaflet-directive

【解决方案1】：

改用L.Marker.setIcon()，并停止传播事件，最好使用L.DomEvent.stop()，因为它会停止将click 事件从标记传播到地图（通过任何L.LayerGroups，如果有的话）。

在纯 Javascript（无角度）中，这将是：

marker.on('click', function(ev) {
    marker.setIcon(L.icon({ iconUrl: 'some-green-icon.png' }));
    // Also this.setIcon(...)

    L.DomEvent.stop(ev);    
});

【讨论】：

你能举个例子吗？
问题是在点击marker之前出现事件正在打开弹窗，所以没有解决问题。虽然这个决定已经为自己找到了。稍后，我会分享。

【解决方案2】：

对于我自己，我解决了这样的问题 - 在必要时添加和显示弹出窗口，而不使用标准机制角度（为消息标记指定）。你当然可以在加载数据时立即初始化弹出消息，但在我的项目中更容易实现按需实现。

//popup's store
$scope.popups = {};

$scope._setViewMarker = function(pId, showPopup){
var wp = $scope.waypoints;
wp[pId].icon.markerColor = 'red';

//set unselected markers color
for (var i in wp)
    if(i != pId){
        wp[i].icon.markerColor = 'blue';
    };  
// close other popups
for (var i in $scope.popups)
    if(i != pId)
        $scope.map.closePopup($scope.popups[i]);        
// show or create poupap
if(showPopup)
    if($scope.popups[pId] ){
        if(!$scope.popups[pId]._isOpen)
            $scope.map.openPopup($scope.popups[pId]);
    } else {
        var ind = $scope.points.map(function(e) { return e._id; }).indexOf(pId);   
        var c = angular.element('<popup point="points['+ind+']" note-click="showDetailPoint(points['+ind+'])"></popup>');
        var linkFn = $compile(c);
        var element = linkFn($scope);
        $scope.popups[pId] = L.popup({offset:[0, -30]}).setLatLng( [wp[pId].lat, wp[pId].lng] ).setContent(element[0]).openOn($scope.map);
        $scope.popups[pId].pointId = pId;
    };
};    
$scope.$on('leafletDirectiveMarker.viewMap.click', function(e, args){
    $scope._setViewMarker(args.modelName, true);
});

【讨论】：