谷歌地圖設置樣式

Question

嘿，我想知道我是否可以動態改變後的地圖對象的樣式屬性。 我正在尋找setStyles的map方法，但沒有找到一個適合我的工作。 我加入的代碼在jsfiddler： The code

function initMap() { 
 
    // Styles a map in night mode. 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: {lat: 40.674, lng: -73.945}, 
 
    zoom: 12, 
 
    styles: [ 
 
     { 
 
     featureType: "road", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     }, 
 
     { 
 
     featureType: "administrative.locality", 
 
     elementType: "labels", 
 
     stylers: [ 
 
      { visibility: "off" } 
 
     ] 
 
     } 
 
    ] 
 
    }); 
 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> 
 
</script>

Answer 1

使用.setOptions：

map.setOptions({styles: [{ 
    featureType: "administrative.locality", 
    elementType: "labels", 
    stylers: [ 
     { visibility: "on" } 
    ] 
}]}); 

updated fiddle

代碼片段：

function initMap() { 
 
    // Styles a map in night mode. 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 40.674, 
 
     lng: -73.945 
 
    }, 
 
    zoom: 12, 
 
    styles: [{ 
 
     featureType: "road", 
 
     elementType: "labels", 
 
     stylers: [{ 
 
     visibility: "off" 
 
     }] 
 
    }, { 
 
     featureType: "administrative.locality", 
 
     elementType: "labels", 
 
     stylers: [{ 
 
     visibility: "off" 
 
     }] 
 
    }] 
 
    }); 
 

 
    map.setOptions({ 
 
    styles: [{ 
 
     featureType: "road", 
 
     elementType: "labels", 
 
     stylers: [{ 
 
     visibility: "off" 
 
     }] 
 
    }, { 
 
     featureType: "administrative.locality", 
 
     elementType: "labels", 
 
     stylers: [{ 
 
     visibility: "off" 
 
     }] 
 
    }] 
 
    }); 
 
    var toggle = true; 
 
    google.maps.event.addDomListener(document.getElementById('btn'), "click", function() { 
 
    if (toggle) { 
 
     map.setOptions({ 
 
     styles: [{ 
 
      featureType: "administrative.locality", 
 
      elementType: "labels", 
 
      stylers: [{ 
 
      visibility: "off" 
 
      }] 
 
     }] 
 
     }); 
 
    } else { 
 
     map.setOptions({ 
 
     styles: [{ 
 
      featureType: "administrative.locality", 
 
      elementType: "labels", 
 
      stylers: [{ 
 
      visibility: "on" 
 
      }] 
 
     }] 
 
     }); 
 
    } 
 
    toggle = !toggle; 
 
    }); 
 
}

/* Always set the map height explicitly to define the size of the div 
 
* element that contains the map. */ 
 

 
#map { 
 
    height: 100%; 
 
} 
 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<input type="button" id="btn" value="toggle" /> 
 
<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
 
</script>