如何更改地图样式

Question

如何添加 API JSON 风格的谷歌地图

[{"stylers": [{ "hue": "#005eff" },{ "gamma": 0.64 }]}]

到我的地图脚本：

<script>
function initialise() {
    var myLatlng = new google.maps.LatLng(43.607956, 21.0122); // Add the coordinates
    var mapOptions = {
        zoom: 13, // The initial zoom level when your map loads (0-20)
        minZoom: 6, // Minimum zoom level allowed (0-20)
        maxZoom: 17, // Maximum soom level allowed (0-20)
        zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
        },
        center: myLatlng, // Centre the Map to our coordinates variable
        mapTypeId: google.maps.MapTypeId.ROADMAP, // Ostali izglediMapTypeId.TERRAIN, MapTypeId.HYBRID, MapTypeId.SATELLITE,
        scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
        // All of the below are set to true by default, so simply remove if set to true:
        panControl: true, // Set to false to disable
        mapTypeControl: true, // Disable Map/Satellite switch
        scaleControl: true, // Set to false to hide scale
        streetViewControl: true, // Set to disable to hide street view
        overviewMapControl: true, // Set to false to remove overview control
        rotateControl: true // Set to false to disable rotate control
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Render our map within the empty div

    var image = new google.maps.MarkerImage("http://web-sajtovi.eu5.org/images/marker.png", null, null, null, new google.maps.Size(40, 52)); // Create a variable for our marker image.

    var marker = new google.maps.Marker({ // Set the marker
        position: myLatlng, // Position marker to coordinates
        icon: image, //use our image as the marker
        map: map, // assign the market to our map variable
        title: 'Klikni za informacije o izradi web sajtova' // Marker ALT Text
    });

    //  google.maps.event.addListener(marker, 'click', function() { // Add a Click Listener to our marker 
    //      window.location='http://www.snowdonrailway.co.uk/shop_and_cafe.php'; // URL to Link Marker to (i.e Google Places Listing)
    //  });

    var infowindow = new google.maps.InfoWindow({ // Create a new InfoWindow
        content: "<h3>Web Dizajn kreativni tim</h3><p>Izrada web sajtova, Braće spasojevicć 42, trstenik, Serbia, tel +38163659766.</p>" // HTML contents of the InfoWindow
    });

    google.maps.event.addListener(marker, 'click', function () { // Add a Click Listener to our marker
        infowindow.open(map, marker); // Open our InfoWindow
    });

    google.maps.event.addDomListener(window, 'resize', function () {
        map.setCenter(myLatlng);
    }); // Keeps the Pin Central when resizing the browser on responsive sites
}
google.maps.event.addDomListener(window, 'load', initialise); // Execute our 'initialise' function once the page has loaded.
</script>

Answer 1

当您想设置样式时，只需通过mapOptions 的styles-property 进行设置：

var mapOptions = {
    zoom: 13, // The initial zoom level when your map loads (0-20)
    minZoom: 6, // Minimum zoom level allowed (0-20)
    maxZoom: 17, // Maximum soom level allowed (0-20)
    zoomControl: true, // Set to true if using zoomControlOptions below, or false to remove all zoom controls.
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.DEFAULT // Change to SMALL to force just the + and - buttons.
    },
    center: myLatlng, // Centre the Map to our coordinates variable
    mapTypeId: google.maps.MapTypeId.ROADMAP, // Ostali izglediMapTypeId.TERRAIN, MapTypeId.HYBRID, MapTypeId.SATELLITE,
    scrollwheel: false, // Disable Mouse Scroll zooming (Essential for responsive sites!)
    // All of the below are set to true by default, so simply remove if set to true:
    panControl: true, // Set to false to disable
    mapTypeControl: true, // Disable Map/Satellite switch
    scaleControl: true, // Set to false to hide scale
    streetViewControl: true, // Set to disable to hide street view
    overviewMapControl: true, // Set to false to remove overview control
    rotateControl: true, // Set to false to disable rotate control
    //apply the styles
    styles:[{"stylers": [{ "hue": "#005eff" },{ "gamma": 0.64 }]}]
}

Answer 2

您可以使用以下代码来设置地图样式：

map.set('styles', [{
    featureType: 'road',
    elementType: 'geometry',
    stylers: [{
        color: '#000000'
    }, {
        weight: 1.6
    }]
}, {
    featureType: 'road',
    elementType: 'labels',
    stylers: [{
        saturation: -100
    }, {
        invert_lightness: true
    }]
}, {
    featureType: 'landscape',
    elementType: 'geometry',
    stylers: [{
        hue: '#ffff00'
    }, {
        gamma: 1.4
    }, {
        saturation: 82
    }, {
        lightness: 96
    }]
}, {
    featureType: 'poi.school',
    elementType: 'geometry',
    stylers: [{
        hue: '#fff700'
    }, {
        lightness: -15
    }, {
        saturation: 99
    }]
}]);

参考：https://developers.google.com/maps/tutorials/customizing/styling-the-base-map

演示：http://jsfiddle.net/lotusgodkk/x8dSP/3524/