放大小叶地图悬停

Question

您好我试图通过在悬停时更改其形状和大小来放大我的传单地图。我正在使用CSS来实现这一目标。以下是代码。

css

div#map {
 height: 300px;
 width: 300px;
 position: absolute;
 border-color: #000000;
 border-radius: 400px;
 z-index: 0;
}

div#map:hover {
  margin-left: auto;
  margin-bottom: auto;
  margin-top: auto;
  margin-right: auto;
  height: 650px;
  width: 650px;
  position: absolute;
  border-radius: 30px;  
  transition: 0.8s;
  box-shadow: 5px 5px 10px #888888;
  z-index: 0;
}

#pattern {
  text-align: center;
  padding: 10px;
}

html
  <div id="map">
    <!-- <img id="hand" style="width:60px; height:60px;"     src="http://nbchardballtalk.files.wordpress.com/2010/10/click-here-large2.jpg"/> -->
  </div>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

js

var map = L.map('map').setView([40.7241745, -73.9841674], 13);
L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapSer    ver/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
}).addTo(map);

var mylayer = L.geoJson().addTo(map);

我面临的问题是，在我将鼠标悬停在地图上后，形状会发生变化，边框会扩展，使地图保持与之前相同的高度宽度。因此，如果在每个高度宽度为300 / 300px之前，具有较大边框的新地图看起来像这样。

我也无法让地图在悬停后保持相同的中心。请开心。

Answer 1

很抱歉迟到的回复。

您尝试实现的目标可以通过在悬停时指定新容器大小并将容器大小更改绑定到mouse hver事件（mouseenter和mouseleave）之后调用invalidateSize（）API来完成。

在更改cnotainer大小后，invalidateSize会重绘地图。所以基本上在鼠标上输入放大容器大小（#map）并调用invalidateSize来重绘maptile。类似地，在鼠标离开时，减小容器大小并调用invalidateSize API。

以下是代码段...

$(document).ready(function() {

  var map;
  var mylayer;

  // draw the map here 

  map = L.map('map', {
    center: [40.7241745, -73.9841674],
    zoom: 13,
    attributionControl: false
  });
  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles © Esri — Esri, DeLorme, NAVTEQ',
    maxZoom: 16
  }).addTo(map);

  mylayer = L.geoJson().addTo(map);
  L.circle([40.7241745, -73.9841674], 250).addTo(map);
  L.marker([40.7241745, -73.9841674]).addTo(map);


  // binding to mouse hover events of mouseenter and mouseleave


  $('#map').bind('mouseenter', function() {
    $('#map').addClass('hoverclass');
    map.invalidateSize();
  });
  $('#map').bind('mouseleave', function() {
    $('#map').removeClass('hoverclass');
    map.invalidateSize();
  });
});

#map {
  height: 150px;
  width: 300px;
  margin: 0 auto;
}
.hoverclass {
  height: 450px !important;
  width: 600px !important;
  border: 1px solid #000;
  box-shadow: 10px 10px 5px #888888;
}

<link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map"></div>

这也将地图集中到您指定的latlng。

希望这有帮助