Question

首先，我想说我不是程序员问题是，我已经浏览了网络，了解如何自定义您的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>

如何组合代码，以便获得我想要的样式的地图？
我还需要在记事本中另外写一下这样的地图样式吗？

Answer 1

首先，我会给你一个javascript google maps API文档的链接。即使对于非程序员来说，谷歌也能很好地理解他们的文档。

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

对于样式用法，请查看以前的回复：

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

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

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/

我希望这会有所帮助。

将自定义样式应用于地图

1 个答案: