изменить пользовательские маркеры листов в html

Я начинаю разрабатывать веб-карты и листовки ... Я нашел простой, но полезный код для меня, и я хочу знать, как обменивать все маркеры буклетов в HTML-коде ниже с помощью mylocal. png (или .svg). Заранее благодарим за любые отзывы !!! Хороший день для всехизменить пользовательские маркеры листов в html

<!doctype html> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css"> 
<style> 
html, body, #map { height: 100%; margin: 0; } 
</style> 

<body> 
<div id="map"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script> 
<script src="https://cdn.rawgit.com/tyrasd/osmtogeojson/2.2.5/osmtogeojson.js"></script> 
<script> 
var api = 'http://overpass-api.de/api/interpreter'; 
var query = 'area["place"="city"]["name"="Cluj-Napoca"];node[amenity=cafe](area);out;'; 
var map = L.map('map'); 
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' 
}).addTo(map); 
$.get(api, {data: query}, function(resp) { 
    var geojson = osmtogeojson(resp); 
    var layer = L.geoJson(geojson).addTo(map); 
    map.fitBounds(layer.getBounds()); 
    }); 
</script>

источник

2015-12-10 mihai.b

попробовать это:

var greenIcon = L.icon({ 
    iconUrl: 'leaf-green.png', // url to your custome icon 


    iconSize:  [38, 95], // size of the icon 
    shadowSize: [50, 64], // size of the shadow 
    iconAnchor: [22, 94], // point of the icon which will correspond to marker's location 
    shadowAnchor: [4, 62], // the same for the shadow 
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor 
});

затем поставить это на карту initilize

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

это так.

источник

2015-12-10 14:14:17

Это не то, что он/она не инициализирует свои собственные маркеры, как можно видеть в код, который отправленный вместе с вопросом. – iH8

По умолчанию при использовании L.GeoJSON каждая точка в данных вашего GeoJSON получает значение по умолчанию L.Marker. Вы можете использовать опцию pointToLayerL.GeoJSON, чтобы вернуть настроенный L.Marker с помощью L.Icon, который использует ваше изображение.

new L.GeoJSON(data { 
    pointToLayer: function (feature, latlng) { 
     return new L.Marker(latlng, { 
      icon: new L.Icon({ 
       iconUrl: 'leaf-green.png', 
       shadowUrl: 'leaf-shadow.png', 
       iconSize:  [38, 95], // size of the icon 
       shadowSize: [50, 64], // size of the shadow 
       iconAnchor: [22, 94], // point of the icon which will correspond to marker's location 
       shadowAnchor: [4, 62], // the same for the shadow 
       popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor 
      }) 
     }); 
    } 
}).addTo(map);

L.GeoJSON учебник: http://leafletjs.com/examples/geojson.html
Пользовательский значок обучающая: http://leafletjs.com/examples/custom-icons.html

источник

2015-12-10 14:24:32 iH8

Привет, iH8, спасибо за сообщение и за ваше время, то, что вы упомянули выше, имеет логику ... но я пытаюсь подтолкнуть следующий код на веб-странице больше не работает ... где я ошибаюсь ??? заранее спасибо. Я вставил код после 'map.fitBounds (player.getBounds()); }); ' –

изменить пользовательские маркеры листов в html

ответ

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