简体   繁体   中英

Custom Marker with Sprite from Geojson in Google Maps

I'm using geoJSON as a data source for Google Maps. I want to use custom markers from a sprite, changing only the iconOrigin.

map.data.setStyle(function(feature) {
var origin=null;
var iconUrl = 'library/css/marker-sprite.png';
var iconSize = new google.maps.Size(50, 50);
var iconAnchor = new google.maps.Point(25, 50);
var iconScaledSize = new google.maps.Size(150, 150);

if (feature.getProperty('origin')) {
    origin = feature.getProperty('origin');   
    var iconOrigin = 'new google.maps.Point(' + origin + ')';
    }
    return ({
        icon: { 
            url: iconUrl,
            size: iconSize,
            anchor: iconAnchor,
            origin: iconOrigin,
            scaledSize: iconScaledSize
        }
});
});

The geoJSON (partial)

        "properties":   {
                        "id-intern": "123",
                        "title": "Marker Title",
                        "content": "lorem ipsum",
                        "origin": "0, 100"
                    },

Does somebody see an error in my approach?

Thanks.

Thanks @Craicerjack to show the track! This way it works.

map.data.setStyle(function(feature) {
var iconoriginx = null;
var iconoriginy = null;
var iconUrl = 'library/css/marker-sprite.png';
var iconSize = new google.maps.Size(50, 50);
var iconAnchor = new google.maps.Point(25, 50);
var iconScaledSize = new google.maps.Size(150, 150);

if (feature.getProperty('iconoriginy')) {
    iconoriginy = feature.getProperty('iconoriginy'); 
    iconoriginx = feature.getProperty('iconoriginx'); 

    var iconOrigin = new google.maps.Point(iconoriginx,iconoriginy);

    }
    return ({
        icon: { 
            url: iconUrl,
            size: iconSize,
            anchor: iconAnchor,
            origin: iconOrigin,
            scaledSize: iconScaledSize
        }
});
});

and the geoJSON with two separated values (NUMBERS!).

        "properties":   {
                        "id-intern": "123",
                        "title": "Marker Title",
                        "content": "lorem ipsum",
                        "iconoriginx": 0,
                        "iconoriginy": 100
                    },

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM