将自定义样式应用于地图 [关闭]答案

【问题标题】：Apply custom styles to maps [closed]将自定义样式应用于地图 [关闭]
【发布时间】：2012-12-16 11:39:01
【问题描述】：

首先，我想说我不是程序员。
问题出在哪里，我已经浏览了整个网络以了解如何自定义您的 Google 地图。
所以我发现你可以使用 API v3 做到这一点。为了找到正确的代码，我使用了 Google 的 Styled Maps 并获得了代码

[
  {
    featureType: "all",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
]

但我不知道如何使用它。我有一个带有此代码的 .html 文件（没有 HEAD，BODY，什么都没有）：

<iframe width="640" height="640" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.de/maps?hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.070843,8.800274&amp;spn=0.002256,0.00456&amp;z=17&amp;output=embed"></iframe><br /><small><a href="https://maps.google.de/maps?hl=de&amp;ie=UTF8&amp;t=m&amp;ll=53.070843,8.800274&amp;spn=0.002256,0.00456&amp;z=17&amp;source=embed" style="color:#0000FF;text-align:left">Größere Kartenansicht</a></small>

如何组合代码以便获得所需样式的地图？
我必须在记事本中额外写什么才能应用地图样式？

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

首先，我会给您一个指向 javascript google maps API 文档的链接。 Google 在使他们的文档易于理解方面做得非常好，即使对于非程序员也是如此。

https://developers.google.com/maps/documentation/javascript/tutorial

有关样式用法，请查看之前的回复：

https://stackoverflow.com/a/11686763/1911676

这是一个示例网页，它使用您发布的样式使用 google 的 javascript API。它直接从位于此处的谷歌地图示例模板复制

http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/devfest-2010/manila/talk/maps/template.html?r=193&spec=svn197

为您做了一些小改动。

<!DOCTYPE html>
 <html>
  <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
   <style type="text/css">

/*you can change the map size here*/
  #map {
    height: 640px;
    width: 640px;
  }

</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function init() {
    var map = new google.maps.Map(document.getElementById('map'), {



//change map settings (origin, zoom amount, type...)
      zoom: 17,
      center: new google.maps.LatLng(53.070843, 8.800274),
      mapTypeId: google.maps.MapTypeId.ROADMAP



    });
  }
  google.maps.event.addDomListener(window, 'load', init);



//Here is where you put your styles
 var styles = [
  {
   featureType: "all",
   elementType: "labels",
   stylers: [
    { visibility: "off" }
   ]
  }
 ];

/*this sets the style*/
 map.setOptions({styles: styles});

</script>


</head>

<body>
 Other content
<!--this is where your map is. This replaces the iframe-->
 <div id="map"></div>
 Other content
</body>
</html>

你可以在这里看到它的工作原理：

http://jsfiddle.net/sP7m5/1/

我希望这会有所帮助。

【讨论】：