2017-01-06 9 views
-2

Я ищу способ добавления изображений на «карточку буклетов» с помощью Javascript.Как добавить изображения на карту с помощью листовки и Javascript

Что я хочу сделать, это загрузить изображение, отрегулировать его размер и положение и прикрепить его к карте листовки.

+2

Добро пожаловать на SO, SO здесь мы поможем вам решить ваши «попытки». Пожалуйста, опишите, что вы делали до сих пор, где вы застряли и т. Д., Чтобы кто-то мог вам помочь. Хотите знать, как задать хороший вопрос? Следуйте этому руководству: http://stackoverflow.com/help/how-to-ask – Ravish

+0

Это то, что вы ищете? http://stackoverflow.com/a/10628079/2441511 – user2441511

ответ

2

Вот базовая демонстрация, показывающая, как добавить изображение, используя 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>