Question

我正在关注此tutorial在Google地图中制作样式，但它不起作用。

这是我的代码

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=MY_API" type="text/javascript"></script>

if (GBrowserIsCompatible()) {

  var mapOptions = {
      // How zoomed in you want the map to start at (always required)
      zoom: 11,

      // The latitude and longitude to center the map (always required)
      center: new google.maps.LatLng(40.6700, -73.9400), // New York

      // How you would like to style the map.
      // This is where you would paste any style found on Snazzy Maps.
      styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
  };

    var  map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

谷歌地图显示像普通地图，但我想在map.how中制作风格来实现这一目标？我想我的谷歌地图显示这张照片的地图

感谢。

Answer 1

v2 API不支持样式化地图。要使用v3 API，请更改API include以删除＆amp; v = 2（当您使用它时，将其更改为documented include，请确保添加您的API密钥。）

renderer.js

html,
body,
#map {
  height: 100%;
  width: 100%;
}

Answer 2

我遇到了今天解决的相同问题。

SnazzyMap中的某些样式在我的应用程序上起作用，而另一些样式（this one for example）却没有。但是所有样式都适用于网站Map Style With Google。

我使用的是Google Map API版本3.38.11，这是当前的最后一个稳定版本。 SnazzyMap使用版本3.39.6。但这不是问题。

我也在同一台计算机上尝试使用不同的浏览器，其行为是相同的。

这是我为我工作和所做的事情：

在导航器（Chrome或Firefox）中打开“开发”面板，然后禁用HTTP缓存（在“控制台参数”面板上）。
打开面板，重新加载您的应用程序。
选择一种样式配置，该样式配置可在SnazzyMap和MapStyleWithGoogle上使用，但不适用于您的应用程序。使用它来更新当前的Google Map对象：myMap.setOptions({styles: myStyles})
如果未应用样式，并且地图设计已重置为默认样式，请尝试相同的样式配置，但JSON数组中没有最后一项。
继续执行＃4，直到考虑到配置为止（对我来说这是第二次尝试）。
奇怪的是，第一种样式配置现在可以使用了。甚至是您重新加载应用程序。

我无法解释，但确实为我工作。我认为问题出在某种Google缓存中。

谷歌地图风格不适合时髦

2 个答案: