单击按钮难以更改Google地图的样式

时间:2019-01-06 17:59:37

标签: javascript google-maps google-maps-api-3

所以我有一个使用google map api的地图,并且我试图在单击按钮时更改水彩。 我已经为此苦了一段时间了。

我在initMap函数外部初始化了map变量,但这似乎没有任何改变。

    var map;
    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'), {

            center: {              
                lat: 40.674,
                lng: -73.945               
            },
            zoom: 12,
            styles: [
                {
                    featureType: 'water',
                    elementType: 'geology',
                    stylers: [{color: '#17263c'}]
            }
            ]               
        });         
    }

    function showTest() {

        var myStyle =[{
            featureType: 'water',
            elementType: 'geometry',
            stylers: [
                { color: '#fc0101' }
            ]
        }];

    map.setOptions({styles: myStyle});
    }

1 个答案:

答案 0 :(得分:3)

即使您在initMap函数外部初始化了一个映射变量,但实际上您随后在该函数内部声明了一个前缀为var的映射变量,却使该变量只在该函数中本地存在。

将其更改为:

 function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {