Javascript 如何更改地图样式

如何添加API JSON样式的google地图

[{“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>

函数初始化（）{
var mylatng=new google.maps.LatLng（43.60795621.0122）；//添加坐标
变量映射选项={
缩放：13，//加载地图时的初始缩放级别（0-20）
最小缩放：6，//允许的最小缩放级别（0-20）
maxZoom:17，//允许的最大soom级别（0-20）
zoomControl:true，//如果使用下面的zoomControl选项，则设置为true，或设置为false以删除所有缩放控件。
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.DEFAULT//。
},
center:myLatlng，//将地图居中到坐标变量
mapTypeId:google.maps.mapTypeId.ROADMAP，//Ostali izglediMapTypeId.TERRAIN，mapTypeId.HYBRID，mapTypeId.SATELLITE，
scrollwheel:false，//禁用鼠标滚动缩放（对响应站点至关重要！）
//默认情况下，以下所有选项都设置为true，因此如果设置为true，只需删除即可：
panControl:true，//设置为false以禁用
mapTypeControl:true，//禁用地图/卫星开关
scaleControl:true，//设置为false以隐藏比例
streetViewControl:true，//设置为禁用以隐藏街景
overviewMapControl:true，//设置为false以删除概览控件
rotateControl:true//设置为false以禁用旋转控制
}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；//在空div中呈现地图
var image=new google.maps.MarkerImage（“http://web-sajtovi.eu5.org/images/marker.png“，null，null，null，new google.maps.Size（40，52））；//为标记图像创建一个变量。
var marker=new google.maps.marker（{//设置标记
位置：myLatlng，//将标记定位到坐标
icon:image，//使用我们的图像作为标记
map:map，//将市场分配给我们的map变量
标题：“Klikni za informacije o izradi web sajtova”//标记ALT文本
});
//google.maps.event.addListener（标记，'click'，function（）{//将单击侦听器添加到标记中
//窗口位置http://www.snowdonrailway.co.uk/shop_and_cafe.php“；//将标记链接到的URL（即Google Places列表）
//  });
var infowindow=new google.maps.infowindow（{//创建一个新的infowindow
内容：“Web Dizajn Krativini timIzrada Web sajtova，Braće spasojevicć42，塞尔维亚trstenik，电话+38163659766.
”//信息窗口的HTML内容
});
google.maps.event.addListener（标记，'click'，函数（）{//将一个单击侦听器添加到标记中
打开（地图，标记）；//打开我们的信息窗口
});
google.maps.event.addDomListener（窗口“调整大小”，函数（）{
地图设置中心（myLatlng）；
})；//在响应站点上调整浏览器大小时，将Pin保持在中心位置
}
google.maps.event.addDomainListener（窗口“加载”，初始化）；//加载页面后，执行“初始化”功能。

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

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
    }]
}]);

参考：

---

演示：

当您想最初设置样式时，只需通过

mapOptions

的

styles

-属性设置即可：

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 }]}]
}