Question

我这里有一个傻瓜 - https://plnkr.co/edit/lsx38RaBgv3PlClPimyu?p=preview

这是Angular 4中的传单js地图

我有按钮来重新定位地图以打印它并将地图重置为起始位置。

打印按钮会重新定位地图，以便我可以打印英国

使用center设置定位，将地图上的lat和long设置为中心。

如果浏览器窗口的大小不同，则可以显示地图的不同部分。

如果浏览器窗口较小，则会切断我想要打印的英国。

我知道打印插件，但我还想从页面打印其他东西

可以将lat定位在距浏览器窗口左上角一定距离的位置。

    import {Component,HostListener, OnInit} from "@angular/core";

    declare let L: any;

    @Component({
      selector: 'map',
      templateUrl: './src/map.html'
    })

    export class MapComponent implements OnInit {

        smallScreen: number = 600;
      center: any = [54, -5];
      zoom: number = 6;

      centerSmall: any = [50, 10];
      zoomSmall: number = 5;

      private atMap: any;

        constructor() { }

        ngOnInit() {
            setTimeout(() => {
                this.initialiseMap(this.center, this.zoom);
            }, 1000)
        }

        private initialiseMap(center:any, zoom:number) {

        if(this.atMap != undefined || this.atMap != null){
          this.atMap.off();
          this.atMap.remove();  
        }  

            this.atMap = L.map('mapid',{
                center: center,
                zoomControl: false,
                zoom: zoom
            });

            this.atMap.options.maxZoom = 15;
            this.atMap.options.minZoom = 5;

            L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
        }).addTo(this.atMap);


            L.control.zoom({

Answer 1

我意识到这并没有直接回答你的问题，但为什么不尝试在英国周围设置一个边界框，然后使用private void Droptree_Drop(object sender, DragEventArgs e) { if (e.Data.GetDataPresent("myFormat")) { // MessageBox.Show(e.Data.GetData("myFormat") as string); Get Item content List<string> currentitems = new List<string>(); foreach (dynamic item in dgChauffeur1.Items) { currentitems.Add(item.Orders.ToString()); } currentitems.Add(e.Data.GetData("myFormat") as string); dgChauffeur1.ItemsSource = currentitems.Select(s => new { Orders = s }).ToList(); //This is where i have my DataGrid however i want to have the datagrid i dropped my item on. } }方法将地图拟合到它：

.fitBounds()

这应该平移和缩放地图，使整个英国都可见，无论浏览器窗口的形状和大小如何。它不能保证中心距离窗户的角落有一个固定的距离，但你可以调整边界，为你提供足够的边界。

Answer 2

我碰巧在传单上工作，这是我的代码，用于初始化一个以点为中心的地图的代码，无论窗口大小（我相信你会将此代码改编为你的需要）：

  private initializeMap() {
    // Place the container at the center of France
    const x: L.LatLng = new L.LatLng(47.212105775622426, 2.3291015625000004);

    // Move the zoom buttons on the right (the left is used for research purposes)
    this.leafletMap = L.map(this.map.nativeElement, { zoomControl: false }).setView(x, 6);
    L.control.zoom({ position: 'topright' }).addTo(this.leafletMap);

    // Add a tile layer to the map 
    this.addLayer();
  }

  private addLayer() {
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
      // tslint:disable-next-line:max-line-length
      attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
      maxZoom: 18,
      id: 'mapbox.streets',
      accessToken: environment.mapBoxToken
    }).addTo(this.leafletMap);

  }

Leaflet js - 相对于浏览器窗口的位置图

2 个答案: