我开始使用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”将标记设置为黑色,以方便查看。
该图标在水平方向上居中对齐,但在垂直方向上定位不正确。
对此有何想法?
Vivek