在谷歌地图中标记街道

Question

我希望在Google Maps上创建一个覆盖层，用不同的颜色显示不同的街道。

在Google Maps API中，可以创建标记和多边形来覆盖特定区域。

是否有一种方法来标记不同的街道？

- Niklas

Answer 1

我觉得你对于在谷歌地图上展示一些应用程序特定的颜色感兴趣（而不是交通地图）。

如果是这样的话，那么你应该查看自定义覆盖层。你可以创建自己的透明背景覆盖层瓦片（带有彩色街道），将它们与谷歌地图瓦片匹配，然后将它们覆盖在地图上。你可以在Maps API reference - Overlays中找到这些内容的描述。

我实际上一直对尝试这个很感兴趣，这个问题可能是一个好的借口。我会告诉你我怎么做的。

编辑：好的，我尝试了一下，这很简单。你只需要在谷歌地图页面加载时获取瓦片图像（你想覆盖的区域），确保你跟踪原始URL，因为这些URL包含你需要编写瓦片覆盖方法的x，y坐标。

用你的彩色路段编辑瓦片，然后将它们上传到你的Web服务器。添加以下代码以在常规地图上使用覆盖层：

var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
              new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
                0,'©2007 Google'));

// Create the tile layer overlay and 
// implement the three abstract methods                 
var tilelayer = new GTileLayer(myCopyright);

// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point,  zoom) { 
    if (zoom == 17 && point.x == 38598 && point.y == 49259)
        return "../pics/times_square.png"; 
};

tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }

var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)

这段代码覆盖了我的 Thing eats NY 瓷砖：

在缩放级别17下，x = 38598，y = 49259。

- RedBlueThing

Answer 2

在Google Maps API中可以创建标记和多边形。您需要创建GPolygon和/或GPolyline对象。

请查看这些教程。

如果您想获取某些街道的坐标（纬度，经度），可以查看此页面的源代码。

我不确定是否完全理解您的问题：您想标记某些给定的街道吗？ 在这种情况下，一种快速且简单的方法是获取街道所有地址的坐标，并根据它们构建一个GPolygon...

- ThibThib

---

请问您能否更新这些链接？它们已经过时了。谢谢。 - Peter VARGA

Answer 3

你考虑过使用OpenStreeMaps吗？

- FlappySocks

Answer 4

尝试深入挖掘用于在普通Google地图网站上显示交通叠加层的代码。

编辑：我刚刚查看了代码，似乎连Google都认为通过在服务器上生成交通线并将其作为透明PNG叠加层拉下来实现这一点更容易。

- richardtallent

Answer 5

我刚刚发现了这个链接，觉得可能对你有兴趣。这是一个JavaScript包，提供在Google地图上显示多条路线的功能。

这是您正在寻找的吗？

- ThibThib