2015-04-24 69 views
0

嗨我需要在地圖上顯示自定義標記,但無法顯示在我的地圖上,請幫助我如何顯示自定義標記。如何在地圖中顯示自定義標記

這是我的JSON對象:

{ 
    "features": [ 
    { 
     "geometry": { 
     "coordinates": [ 
      [-89.39982622861862, 43.06710857435938 ], 
      [-89.39982622861862, 43.06710857435938 ] 
     ], 
     "type": "Point" 
     }, 
     "id": "ci7gsmklj004ahym0qpgca8j7", 
     "properties": { 
     "icon": { 
      "options": { 
      "className": "", 
      "iconUrl": "/hb/assets/leaflet/images/d.png", 
      "iconSize": [ 64, 64], 
      "iconAnchor": [ 32, 32], 
      "popupAnchor": [ 0, -24 ] 
      }, 
      "_initHooksCalled": true 
     }, 
     "text": "Hari", 
     "title": "Hunt Area #1" 
     }, 
     "type": "Feature" 
    } 
    ], 
    "type": "FeatureCollection" 
    } 

這是我的代碼:

var layer = new L.tileLayer('http://{s}.tiles.mapbox.com/v4/zittelevan.lgjj093b/{z}/{x}/{y}.png?access_token={token}', { 
          attribution: 'Attribute data here' 
          maxZoom: 18, 
          token: "Token Here" 
         }); 
         var map = new L.map('map', { 
          center:[43.10361493125458,89.52398300170898], 
          zoom: 18, 
          layers: [layer], 
         }); 

         L.geoJson(features).addTo(map); 

我跟着不同的網站,但我無法正確地找到一個解決方案,這樣我請求你的人,請幫幫我如何在地圖上顯示自定義標記。

回答

0

您需要使用pointToLayerhttp://leafletjs.com/reference.html#geojson-pointtolayer)選項L.geoJson。 Leafet並沒有從檢查GeoJSON特性的屬性哈希中找出自定義標記設置,您需要自己設置它。下面代碼。

var myIcon = L.icon({ 
    "className": "", 
    "iconUrl": "/hb/assets/leaflet/images/d.png", 
    "iconSize": [ 64, 64], 
    "iconAnchor": [ 32, 32], 
    "popupAnchor": [ 0, -24 ] 
}); 
geojsonOptions = { 
    pointToLayer: function(feature,latLng) { 
     return L.marker(latLng,{icon:myIcon}) 
    } 
} 
L.geoJson(features).addTo(map); 
+0

由於沒有 – HariKrishna

0

我這樣,我得到了答案您的回覆

var myIcon = L.icon({ 
"className": "", 
"iconUrl": "/hb/assets/leaflet/images/d.png", 
"iconSize": [ 64, 64], 
"iconAnchor": [ 32, 32], 
"popupAnchor": [ 0, -24 ] 
}); 

L.marker([44.86475133784528,-88.98447811603546],{icon:myIcon }).addTo(map); 
相關問題