更改中心时传单地图变灰答案

【问题标题】：leaflet Map get greyed out when changing the centre更改中心时传单地图变灰
【发布时间】：2019-12-30 13:57:26
【问题描述】：

我有一个 latlng 列表，单击该列表以使用该 latlng 设置地图中心。当我在地图之间切换时出现问题，地图变灰。

我试过了：-

更改传单地图版本
使用 InvalidateSize 函数
使用 panTo、flyTo 代替 setView
使用传单内部重置功能

这是一个针对问题的 plunker 演示，在 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>

【问题讨论】：

创建地图的方式（使用 settimeout ）对我来说很奇怪。给出的解决方案有效，但您可以尝试使用更实用的方式来加载地图（例如 document.ready）

标签： javascript google-maps leaflet

【解决方案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);
})

【讨论】：

谢谢，但这并没有解决问题。