Leaflet.js를 사용하여 맞춤 마커 만들기지도에 여러 마커 추가

Question

저는 응용 프로그램을 작성 중이며 Leaflet.js를 사용하여 맞춤 마커를 추가하려고합니다. 지금까지 작성한 코드가지도에 맞춤 마커를 추가했습니다. 그러나 기본 마커도지도에 존재합니다. 내가 this.Any 도움을 해결할 수있는 방법 는

var mymap = L.map('mapid').setView([-1.3938636,36.7442377], 13); 
    var mapdata = $.ajax({ 
     url: '/data.json', 
     dataType: 'text', 
     success: function(data) { 
      var geojson; 
      geojson = $.parseJSON(data); 



       L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
        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>', 
        maxZoom: 18, 
        id: 'mapbox.streets', 
        accessToken: 'ACCESS_TOKEN' 
       }).addTo(mymap); 

       //add external geojson to map 
      var cordinates = L.geoJSON(geojson).addTo(mymap); 

      //Add popups to markers 
      function onEachFeature(feature,layer){ 
       if (feature.properties && feature.properties.popupContent) { 
        layer.bindPopup(feature.properties.popupContent); 
       } 
      } 
      L.geoJSON(geojson, { onEachFeature: onEachFeature }).addTo(mymap); 


       //Adding custom markers to maps 
       var HospIcon = L.icon({ 
        iconUrl: '<%= asset_path('red_MarkerH.png') %>', 

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

       var Custom_marker = L.geoJSON(geojson, { 
        pointToLayer : function(feature,latlng){ 
         return L.marker(latlng, {icon: HospIcon}).addTo(mymap); 
        } 
       }); 
     } 


    }); 


    var popup = L.popup(); 

    function onMapClick(e) { 
     popup 
      .setLatLng(e.latlng) 
      .setContent("You clicked the map at " + e.latlng.toString()) 
      .openOn(mymap); 
    } 

    mymap.on('click', onMapClick); 

높게 평가 될 것입니다. This is what the maps look like,The blue markers are the default,the red markers are the custom markers

도움을 주시면 감사하겠습니다. 미리 감사드립니다. 이 기능

var cordinates = L.geoJSON(geojson).addTo(mymap); 

는 좌표 및 사용의 기본 마커 아이콘을 추가 할 것이기 때문에 기본 마커를 수정하려면

Answer 1

는 당신의

my_json = L.geoJson(geojson, { 
    pointToLayer: function (feature, latlng) { 
     var smallIcon = new L.Icon({ 
      iconSize: [27, 27], 
      iconAnchor: [13, 27], 
      popupAnchor: [1, -24], 
      iconUrl: 'icone/chapel-2.png' 
     }); 
     return L.marker(latlng, {icon: smallIcon}); 
    } 
}); 

다음과 같이 그 함수에 콜백을 정의해야합니다 2 번째로 렌더링했기 때문에 마커를 두 번 그려야합니다. addTo(mymap) 처음으로 GeoJson을 주입합니다. 둘째, 당신이 당신의 아이콘을 정의 할 때지도에

참조를 추가 :이 도움말 당신이 표시하십시오

• https://gis.stackexchange.com/questions/121424/leaflet-how-to-use-a-custom-marker-on-a-geojson-layer
• 나를 위해 일한 것 http://bl.ocks.org/ThomasG77/61fa02b35abf4b971390