Question

目前，在事件发生后我向用户显示一个弹出窗口。但是，我按照教程中所示，通过输入弹出窗口应显示的坐标来执行此操作：

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',
    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

这个问题是我必须将用户飞到一个预定的位置（因为他们没有看到标记放在哪里），所以他们可以看到弹出窗口。

如果我只想让弹出窗口显示在用户视口的中心，该怎么办？

Answer 1

只需使用map.getCenter()：

检索当前地图视图中心的纬度/经度位置即可

返回地图视图的地理中心

示例：

＆＃13;

var map = L.map('map').setView([48.86, 2.35], 11);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

setTimeout(function() {
  var currentViewCenter = map.getCenter();
  L.marker(currentViewCenter).addTo(map);
}, 1000);

＆＃13;

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 200px"></div>

＆＃13;

在屏幕中央显示弹出窗口

1 个答案: