javascript - 如何打开从传单类绘制的 map 作为弹出窗口或在新选项卡中？

我有以下几行代码生成地图，可以看到它利用小叶类来呈现它。除我另外要求将地图作为新的弹出窗口或在单击地图上任何位置的新选项卡中打开之外，其他方法都可以正常工作。

码：-

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.0/leaflet.draw.js"></script>


/* miscellaneous stuff here */

    <div class="col-sm-6 col-sm-offset-4">
    <leaflet class="showMap" defaults="mappingConfig.defaults" center="mappingConfig.cityCenter" markers="markers" controls="controls"></leaflet>
    </div>

我应该如何实现相同的目标？我没有在线找到任何相关的代码示例，这些示例对此特定情况有帮助

最佳答案

如果在模态模板中，您有一个主视图中具有与该图相同的ID的图，并在服务中放置了该图对象（以便在控制器之间共享），则您可以在模态和风景。

angular.module('mymap.services', []).factory('MapServices', function () {
var map ={
center : {
    lat: 49,
    lng: 34,
    zoom: 8
}, defaults : {
    zoomControl: false,
    attributionControl: true
},
baselayers : {
    xyz: {....},
markers:[....]
};
return {
    getMap: function () {
        return map;
    },
  }});

然后，您可以使用类似：

$scope.$on('leafletDirectiveMarker.map.click', function (event, args)    {
    $scope.map.center.lat = args.model.lat;
    $scope.map.center.lng = args.model.lng;
    $scope.valueModal = {};
    $scope.valueModal.properties = args.model.properties.properties;
    //show modal
    $scope.modalPopup.show();
});

或者，也可以将标记用于angular-leaflet指令中，然后创建一个图层：

leafletData.getMap("map").then(function (map) {
  map.invalidateSize();
  //resp is the geojson
  var geojson = new L.GeoJSON(resp, {
                    onEachFeature: function (feature, layer) {
                        layer.on('click', function (e) {
                            $scope.map.center.lat = feature.geometry.coordinates[1];
                            $scope.map.center.lng = feature.geometry.coordinates[0];
                            $scope.feature = feature;
                            //open a modal
                            $scope.openLayersModal();
                        });
                    }
                });
                markers.addLayer(geojson);
                map.addLayer(markers);

            }, function (err) {
                console.log('ERROR', err.status);
            });
        });