Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/398.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何以弹出窗口或新选项卡的形式打开从传单类绘制的地图?_Javascript_Html_Leaflet_Angular Leaflet Directive - Fatal编程技术网

Javascript 如何以弹出窗口或新选项卡的形式打开从传单类绘制的地图?

Javascript 如何以弹出窗口或新选项卡的形式打开从传单类绘制的地图?,javascript,html,leaflet,angular-leaflet-directive,Javascript,Html,Leaflet,Angular Leaflet Directive,我有以下几行代码生成了一个地图,可以看到它使用了传单类来渲染它。这很好,除了我另外要求地图作为一个新的弹出窗口打开,或者在地图上单击任意位置的新选项卡中打开 代码:- <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.0/leaflet.

我有以下几行代码生成了一个地图,可以看到它使用了传单类来渲染它。这很好,除了我另外要求地图作为一个新的弹出窗口打开,或者在地图上单击任意位置的新选项卡中打开

代码:-

<script src="https://unpkg.com/leaflet@1.0.1/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();
});
或者,要在“角度传单”指令中使用标记,可以创建一个层:

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

如果在模态的模板中,您在主视图中有一个具有相同映射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();
});
或者,要在“角度传单”指令中使用标记,可以创建一个层:

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

你能编辑并澄清你的问题吗?你的意思是要为地图打开一个新选项卡吗?(通常,要在新选项卡中打开某些内容,请使用链接中的
target=“\u blank”
属性,例如。)或者您是否尝试单击地图在传单弹出窗口中打开另一张地图?请澄清:)嗨,我需要的是一个新的模式弹出窗口应该打开点击地图上的任何地方。此模式弹出窗口应包含地图数据本身。请编辑并澄清您的问题?你的意思是要为地图打开一个新选项卡吗?(通常,要在新选项卡中打开某些内容,请使用链接中的
target=“\u blank”
属性,例如。)或者您是否尝试单击地图在传单弹出窗口中打开另一张地图?请澄清:)嗨,我需要的是一个新的模式弹出窗口应该打开点击地图上的任何地方。此模式弹出窗口应包含地图数据本身。