如何使用传单和Javascript在地图上添加图像

Question

I am looking for a way to add images to a 'leaflet map' using Javascript.

What I want to do is to load image, adjust its size and position, and attach it to a leaflet map.

Answer 1

Here's a basic demo showing how to add an image using imageOverlay .

You adjust the position and size of the image by providing 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/leaflet@1.0.2/dist/leaflet.js"></script> <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css"> <div id="map"></div>