如何动态设置谷歌地图样式

How to set Google Maps styles dynamically

本文关键字：设置 谷歌地图 样式 动态 何动态      更新时间：2023-09-26

使用Google Map APi v3，有如下样式选项:

   {
     featureType: 'transit.line',
     elementType: 'geometry',
     stylers: [
        { hue: '#fc0101' },
        { visibility: 'on' }
     ]
    }

这适用于地图加载，可以在API示例中看到:https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple

我需要添加一个点击事件来显示或更改某种样式，例如，如果我在dom事件上更改上述代码hue值。

示例代码:

// a link to test map changes
var testDiv = document.getElementById("test");
// add click event listener for map
google.maps.event.addDomListener(testDiv, 'click', showTest);
// the function for setZoom works 
function showTest() {
    map.setZoom(2); 
}

我找不到任何设置样式的文档，没有"set"，https://developers.google.com/maps/documentation/javascript/reference#StyledMapType

有setOptions，其中包括一个styles属性，但我不能让它工作。

一个不工作的例子:

 // turn off transit line visibility on click
function showTest() {
    map.setOptions({
        styles : {
            featureType: 'transit.line',
            elementType: 'geometry',
            stylers: [
                { hue: '#fc0101' },
                { visibility: 'off' }
            ]
        }
    });
}

  • 缩放事件的工作示例(只是缩放地图):http://codepen.io/anon/pen/yfGxm

  • 样式事件的非工作示例(此设置用于删除
    )

编辑:下面的答案很好，我没有意识到这也记录在这里:https://developers.google.com/maps/documentation/javascript/styling?csw=1

http://codepen.io/jolsalazar/full/anKqG

下面是示例代码: 
var map;
var chicago = new google.maps.LatLng(41.850033, -87.650052);
function initialize() {
  var roadAtlasStyles = [
    {
      featureType: 'transit.line',
      elementType: 'geometry',
      stylers: [
        { hue: '#ff0000' },
        { visibility: 'on' },
        { lightness: -70 }
      ],
      enableCloseButton: true,
      visible: false
    }
  ];
  var mapOptions = {
    zoom: 12,
    center: chicago,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'usroadatlas']
    }
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  var styledMapOptions = {
    name: 'US Road Atlas'
  };
  var usRoadMapType = new google.maps.StyledMapType(
      roadAtlasStyles, styledMapOptions);

  map.mapTypes.set('usroadatlas', usRoadMapType);
  map.setMapTypeId('usroadatlas');
  google.maps.event.addDomListener(document.getElementById('test'), 'click', function() {
    map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
  });
}
jQuery(document).ready(function () {
    google.maps.event.addDomListener(window, 'load', initialize);
});

对我来说，map. setopoptions()很适合设置样式。我想你忘记用[]括号了。

你可以改变地图的样式如下:

// turn off transit line visibility on click
function showTest() {
    var myStyle =[{
        featureType: 'transit.line',
        elementType: 'geometry',
        stylers: [
            { hue: '#fc0101' },
            { visibility: 'on' }
         ]
    }];
    map.setOptions({styles: myStyle});
}
相关文章：