Question

我无法弄清楚如何创建样式化地图，以便我可以使用我的样式数组。我正在使用高级自定义字段插件，因此用户可以输入自己的位置，因此我使用文档中的jQuery来渲染地图。代码如下：

// My Styles!

var styles = [
{
featureType: "administrative",
elementType: "all",
stylers: [
  { saturation: -100, }
]
}];

function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 10,
    center      : new google.maps.LatLng(0, 0),
    mapTypeId   : google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
};

// create map               
var map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

    add_marker( $(this), map );

});

// center map
center_map( map );

}

我通常使用它创建一个样式化的地图，但我不能使用上面的代码：

var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

我意识到这可能很简单！虽然我喜欢了解为什么事情有效，为什么却没有。

Answer 1

如果您查看official documentation（创建StyledMapType部分），您似乎忘记了部分代码：

  // Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

您声明了一个新的StyledMap，但从未告诉您当前的Google地图实例，它必须使用它。

如果您不想在许多不同的StyledMap之间切换，您还可以使用以下方式设置样式：

map.setOptions({styles: styles}); // map is your current map object

使用第二种方法，这段代码已经过时了：

var styledMap = new google.maps.StyledMapType(styles,
{name: "Styled Map"});

我从未在GoogleMaps中使用StyledMap，我的回答是基于我对Google Maps API和文档的其他了解。所以它可能是不正确的。

渲染风格的谷歌地图

1 个答案: