传单图标出现在图像下方

时间:2018-08-23 22:24:05

标签: javascript leaflet react-leaflet

我开始使用Leaflet并遇到以下问题,即在图像上方显示标记。

这是我的代码,摘自Greg Kempe的在线教程:http://kempe.net/blog/2014/06/14/leaflet-pan-zoom-image.html

var map = L.map('image-map', {
  minZoom: 1,
  maxZoom: 4,
  center: [0, 0],
  zoom: 1,
  crs: L.CRS.Simple
});

// dimensions of the image
var w = 2000,
    h = 1500,
    url = 'http://kempe.net/images/newspaper-big.jpg';

// calculate the edges of the image, in coordinate space
var southWest = map.unproject([0, h], map.getMaxZoom()-1);
var northEast = map.unproject([w, 0], map.getMaxZoom()-1);
var bounds = new L.LatLngBounds(southWest, northEast);

var myIcon = L.divIcon({
   className: 'marker-icon'
});

// you can set .my-div-icon styles in CSS
L.marker(bounds.getCenter(), {icon: myIcon}).addTo(map);

// add the image overlay,
// so that it covers the entire map
L.imageOverlay(url, bounds).addTo(map);

// tell leaflet that the map is exactly as big as the image
map.setMaxBounds(bounds);

现在,我主要关心的是为什么标记显示在实际图像下方,尤其是当我为标记位置指定getCenter()时。图标类“ marker-icon”将标记设置为黑色,以方便查看。

该图标在水平方向上居中对齐,但在垂直方向上定位不正确。

Leaflet rectangular box appearing too low

对此有何想法?

Vivek

0 个答案:

没有答案