当更换中心时，传单地图会变灰。

Question

我有一个最近点击的列表，地图中心是用最近的点击设置的。当我在最近的地图上切换时，会出现这个问题。

我试过：-

1. 更改单张地图版本
2. 使用InvalidateSize函数
3. 使用panTo，flyTo而不是setView
4. 用过的传单内部复位功能

这是一个柱塞演示的问题，切换之间的location1和location2 3-4次.https://plnkr.co/edit/87cFuRJ7iBKn1cTeVPb9?p=preview

​

// Code goes here


setTimeout(() => {
  tiles = L.gridLayer.googleMutant({
    maxZoom: 20,
    type: 'roadmap',
    streetViewControl: true,
    continuousWorld: false
  });
  latlng = L.latLng(30.695267, 76.879746);
  displayedMap = L.map('map_canvas', {
    center: latlng,
    zoom: 13,
    layers: [tiles],
    fullscreenControl: {
      pseudoFullscreen: false // if true, fullscreen to page width and height
    },
    customControl: '<map-control/>',
    attributionControl: false,
    maxBoundsViscosity: 0.75,
    minZoom: 2,
    worldCopyJump: true,
    zoomControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    options: {},
    ourCustomControl: function(template) {}
  });

  L.DomEvent.on(document.getElementById('loc1'), 'click', function() {
    console.log('loc1 click')
    displayedMap.setView(L.latLng(30.695267, 76.879746), 13)
  })
  L.DomEvent.on(document.getElementById('loc2'), 'click', function() {
    console.log('loc2 click')
    displayedMap.setView(L.latLng(30.799228, 76.914633), 13)
  })
}, 200)

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<script src="https://maps.googleapis.com/maps/api/js" async defer></script>
<!--<script src="leaflet.js"></script>-->
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet-src.js" integrity="sha512-+ZaXMZ7sjFMiCigvm8WjllFy6g3aou3+GZngAtugLzrmPFKFK7yjSri0XnElvCTu/PrifAYQuxZTybAEkA8VOA==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.gridlayer.googlemutant@0.8.0/Leaflet.GoogleMutant.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />

<style>
  #map_canvas {
    width: 50vw;
    height: 50vh;
  }
</style>

<h1>Hello Plunker!</h1>
<div id="map_canvas"></div>
<button id="loc1" type="button">location1</button>
<button id="loc2" type="button">location2</button>

​

Answer 1

我意识到缩放可以解决问题。您可以按以下方式编写单击函数。

L.DomEvent.on(document.getElementById('loc1'), 'click', function(){
  console.log('loc1 click');
  displayedMap.setView(L.latLng(30.695267, 76.879746),12);
  displayedMap.zoomIn(1);
})
L.DomEvent.on(document.getElementById('loc2'), 'click', function(){
  console.log('loc2 click');
  displayedMap.setView(L.latLng(30.799228, 76.914633),12);
  displayedMap.zoomIn(1);
})