在openLayers中创建拥有自定义风格的googleMap

   先来一张效果图：

 

 

链接：http://www.empreinte-urbaine.eu/mapping/styled_gmap.html

 

下面把源码放出，当然也可以直接去上面的链接查看源文件。

 

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.5&sensor=false"></script>
    <script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <style type="text/css">
    body {font-family: Arial, sans serif;font-size:0.9em;}
    .olLayerGoogleCopyright {display:none;} </style>
    <script type="text/javascript">
    
        var map;
	
	 // google style map - Kind of satured grey ....
	 // see http://www.41latitude.com/post/1268734799/google-styled-maps for pre-defined styles
	var stylez = [ { featureType: "all", elementType: "all", stylers: [ { visibility: "simplified" }, { hue: "#4d00ff" }, { saturation: -64 } ] } ];
		
	var gmap = new OpenLayers.Layer.Google("Google Streets", {type: 'styled'} );
	    
	var styledMapOptions = {
	    name: "Styled Map"
	};

	var styledMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
	

        function init() {
            map = new OpenLayers.Map('map');
	    map.addLayers([gmap]);
	    
	    // Google.v3 uses EPSG:900913 as projection, so we have to
	    // transform our coordinates
	    map.setCenter(new OpenLayers.LonLat(19, 61.1).transform(
		new OpenLayers.Projection("EPSG:4326"),
		map.getProjectionObject()
	    ), 5);
	    
	    gmap.mapObject.mapTypes.set('styled', styledMapType);
	    gmap.mapObject.setMapTypeId('styled');
	    
        }
    </script>

 

  核心代码主要是14-20行以及34、35行。直接copy到自己代码中即可。you got it.

下面给出googlemap支持的自定义参数链接：http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html。建议用googleChrome打开。

只需将showJson中的参数对覆盖到上述代码中的stylez变量中即可。