Google Map动态设置地图对象的样式 [英] google map set styles dynamically of map object
本文介绍了Google Map动态设置地图对象的样式的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道我是否可以稍后动态更改map对象的styles属性. 我正在寻找map的setStyles方法,但找不到适合我的方法.
I would like to know if I can change the styles property of map object dynamically later. I am looking for method of setStyles of map, but didn't find one which is work for me.
代码段:
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>
推荐答案
使用.setOptions
:
map.setOptions({styles: [{
featureType: "administrative.locality",
elementType: "labels",
stylers: [
{ visibility: "on" }
]
}]});
代码段:
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>
这篇关于Google Map动态设置地图对象的样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文