我有以下几行代码来生成 map ,可以看出它使用传单类来渲染它。这工作得很好,只是我还需要将 map 作为新的弹出窗口打开,或者在单击 map 上的任意位置时在新选项卡中打开。
代码:-
<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>
我应该如何实现同样的目标?我在网上没有找到任何对这个特定场景有帮助的相关代码示例
最佳答案
如果在模态模板中您有一个与主视图中的 map 具有相同 id 的 map ,并将 map 对象放入服务中(以在 Controller 之间共享它),则您可以在模态和 View 中。
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);
});
});
关于javascript - 如何以弹出窗口或新选项卡的形式打开从传单类绘制的 map ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41058127/