2015-07-30 2 views
0

Я новичок в веб-разработке, и я хочу вставить карту на мою страницу html.Как вставить карту лифтов на страницу html?

Как я могу это сделать?

Я использую карту буклетов, созданную из QuantumGIS с плагинами qgis2leaflet. В будущем я хочу показать график тепла на карте, представляющий распределение популяции.

это мой HTML код:

<div class="widget span8"> 
     <div class="widget-header"> 
      <i class="icon-map-marker"></i> 
      <h5>Map Visualization</h5> 
      <div class="widget-buttons"> 
      </div> 
     </div> 
     <div class="widget-body clearfix"> 
      <div style="height:274px;" id="graph" class="widget-analytics-large"></div> 
     </div> 
     </div> 
    </div> 
+0

Вы следовали [это] (http://www.qgistutorials.com /en/docs/leaflet_maps_with_qgis2leaf.html), я думаю, что он охватывает все аспекты. – muzaffar

+0

Да, я следил за этим учебным пособием и смог создать карту буклетов. Теперь я хочу поместить эту карту листовки на мою собственную страницу html. Как я могу это сделать? @muzaffar – Haryanto

ответ

0

Посмотрите здесь: http://leafletjs.com/examples/quick-start.html Это пример страницы: http://leafletjs.com/examples/quick-start-example.html

в целом, вы должны добавить заполнитель DIV для вашей карты в тело

<div id="my-custom-map" style="width: 600px; height: 400px"></div> 

, а затем создать карту листовку через API Javascript:

var map = L.map('my-custom-map').setView([51.505, -0.09], 13); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
     '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
     'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    id: 'mapbox.streets' 
}).addTo(map); 

Обратите внимание, что вы используете идентификатор элемента (мой обычай-карту), чтобы создать карту листовки в этом DIV

Смежные вопросы