-4

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

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

4

1 回答 1

2

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

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/

我希望这有帮助。

于 2013-01-02T06:14:43.657 回答