Вот базовая демонстрация, показывающая, как добавить изображение, используя imageOverlay
.
Вы отрегулировать положение и размер изображения, обеспечивая imageBounds
// center of the map
var center = [-33.8650, 151.2094];
// Create the map
var map = L.map('map').setView(center, 5);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
// add a marker in the given location
L.marker(center).addTo(map);
L.marker([-35.8650, 154.2094]).addTo(map);
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Sydney_Opera_House_-_Dec_2008.jpg/1024px-Sydney_Opera_House_-_Dec_2008.jpg',
imageBounds = [center, [-35.8650, 154.2094]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);
html,
body {
height: 100%;
}
#map {
height: 100%;
}
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<div id="map"></div>
Добро пожаловать на SO, SO здесь мы поможем вам решить ваши «попытки». Пожалуйста, опишите, что вы делали до сих пор, где вы застряли и т. Д., Чтобы кто-то мог вам помочь. Хотите знать, как задать хороший вопрос? Следуйте этому руководству: http://stackoverflow.com/help/how-to-ask – Ravish
Это то, что вы ищете? http://stackoverflow.com/a/10628079/2441511 – user2441511