谷歌地图瓷砖 - 街道和标签与风格叠加?

时间:2011-04-21 16:08:23

标签: google-maps overlay

我有一个谷歌地图,我在地图上插入一个自定义图层,然后在其上添加谷歌街道和标签。我一直在四处搜索,看看是否有任何方法可以像路线图一样对街道和标签进行风格化。

所以我有这个:

var myStyle = [
{
    featureType: "road.arterial",
    elementType: "all",
    stylers: [
    { visibility: "simplified" }
    ]
},{
    featureType: "road.highway",
    elementType: "all",
    stylers: [
      { visibility: "simplified" }
    ]
}
];

var myTileLayer = {
    getTileUrl: function(coord, zoom) {
        return "myTiles.php?" +
        "z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var labelTiles = {
    getTileUrl: function(coord, zoom) {
        return "http://mt0.google.com/vt/v=apt.116&hl=en-US&" +
        "z=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var googleLabelLayer = new google.maps.ImageMapType(labelTiles);

var mapOptions = {
    mapTypeControlOptions: {
     mapTypeIds: ['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]
   },
    zoom: 9,
    center: map_center,
    mapTypeId: 'mystyle'
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.mapTypes.set('mystyle', new google.maps.StyledMapType(myStyle, { name: 'My Style' }));
map.overlayMapTypes.insertAt(0, myTileLayer);
map.overlayMapTypes.insertAt(1, googleLabelLayer);

有人知道吗?

1 个答案:

答案 0 :(得分:1)

是的,您可以为街道和标签设置样式,至少在有限的范围内。例如,您可以将道路改为绿色,如下所示:

[
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { hue: "#3bff00" }
    ]
  }
]

使用http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html上的Google Maps API样式化地图向导来使用不同的设置。它还将生成复制样式所需的代码。它还可以帮助您识别API不支持的事情。例如,我不相信目前有一种方法可以使标签变为斜体。 (如果有的话,那很好,但你明白我的意思。)

另一件事:Maps API v3.5不久前问世了。您可能需要查看发行说明或公告或其他任何内容,以防万一现有功能无法出现在向导中,无论出于何种原因。