2014-06-26 10 views
12

Używam GeoJSON jako źródła danych dla Google Maps. Używam v3 API do tworzenia warstwy danych w następujący sposób:Niestandardowe znaczniki punktów z pliku geoJson z Google Maps

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
<script> 
var map; 
function initialize() { 

    //Initialise the map 
    var myLatLng = new google.maps.LatLng(53.231472,-0.539783); 
    map = new google.maps.Map(document.getElementById('map-canvas'), { 
    zoom: 17, 
    center: myLatLng, 
    scrollwheel: false, 
    panControl: false, 
    zoomControl: false, 
    scaleControl: true, 
    disableDefaultUI: true 
    }); 

    //Initialise base folder for icons 
    var iconBase = '/static/images/icons/'; 

    //Load the JSON to show places 
    map.data.loadGeoJson('/api/geo'); 

} 

google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

<div id="map-canvas"></div> 

Źródłem moich danych GeoJSON jest następujący:

{ 
    "type": "FeatureCollection", 
    "features": [ 
    { 
     "type": "Feature", 
     "geometry": { 
     "type": "Point", 
     "icon": "/static/images/icons/map-marker-do.png", 
     "coordinates": [ 
      -0.53743, 
      53.23437 
     ] 
     }, 
     "properties": { 
     "name": "Cathedral", 
     "description": "One of Europe’s finest Gothic buildings, once the tallest building in the world that dominates Lincoln's skyline.", 
     "icon": "/static/images/icons/map-marker-do.png" 
     } 
    } 
    ] 
} 

Co usiłuję zrobić to uczynić ikona znacznika na mapie pochodzi z właściwości "icon" w JSON, ale nie może dowiedzieć się, jak uzyskać dane, aby zmienić domyślny znacznik. Czy ktoś może zaoferować jakąkolwiek poradę? Dzięki.

+0

Gdzie można dodać znacznik? Co robisz z 'iconBase'? – MrUpsidown

+0

@MrUpsidown: korzysta z [** warstwy danych **] (https://developers.google.com/maps/documentation/javascript/datalayer), funkcje (np. Znaczniki/punkty) wczytane przez loadGeoJson zostaną dodane automatycznie przez API –

+0

Mój zły. Widziałem tę ikonę z częścią adresu URL w JSON i nie myślałem dalej :-) – MrUpsidown

Odpowiedz

24

Użyj stylizacji funkcyjną (stylizacji-funkcje umożliwić Ci zastosować style oparte na określonej funkcji)

map.data.setStyle(function(feature) { 
    return {icon:feature.getProperty('icon')}; 
    }); 
+0

Słodki. Dzięki wielkie. :) – doubleplusgood

Powiązane problemy