将自定义样式应用于地图

-3

首先，我想说我不是程序员。
问题是，我查看了所有网络，以了解如何自定义您的Google地图。
所以我发现你可以使用API v3来做到这一点。为了找到合适的代码，我用从谷歌风格的地图，并得到了代码将自定义样式应用于地图

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

但我不知道如何使用它。我有一个.html文件与此代码（没有头部，身体，什么都没有）：

<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>

如何合并的代码，所以我得到我想要的风格的地图吗？
我还需要在记事本中额外写些什么，所以地图样式才适用？

来源

2013-01-02 Helga

首先我会给你一个链接到JavaScript谷歌地图的API文档。 Google做了很好的工作，使他们的文档很容易理解，即使对于非程序员也是如此。

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

对于造型使用看一看这之前的响应：

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

这里是使用谷歌的的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-02 06:14:43 Enigmadan

将自定义样式应用于地图

回答

相关问题