在Google地图中标记街道 [英] Marking streets in Google Maps

问题描述

我想在Google地图上创建一个叠加层，以不同颜色显示不同的街道。

在Google Maps API中，可以创建覆盖某些区域的标记和多边形。

一种方式来标记不同的街道？

解决方案

这听起来像你有兴趣为你的谷歌显示一些特定于应用的着色地图显示（而不是交通地图）。

如果是这样，那么您应该查看自定义覆盖。您可以创建自己的透明背景叠加拼贴（使用彩色街道），将它们与Google地图拼贴对齐，然后叠加在地图上。您可以在 Maps API参考 - 叠加层。

我真的很想试试这个，这个问题可能是一个很好的借口。我会让你知道我是怎么去的。

编辑：好的，我试过了，它是非常简单的。您只需在Google地图页面加载时（对于要覆盖的区域）抓取图像图像。请确保您跟踪原始网址，因为这些网址具有x，y坐标，您需要编写瓦片叠加方法。

用您的彩色道路编辑拼贴，然后将它们上传到您的网络服务器。添加以下代码以在常规贴图上使用叠加层：

  var myCopyright = new GCopyrightCollection（©）; 
 myCopyright.addCopyright（new GCopyright（'Demo'，
 new GLatLngBounds（new GLatLng（-90，-180），new GLatLng（90,180）），
 0，'©2007 Google' ））; 
 
 //创建切片图层叠加和
 //实现三个抽象方法
 var tilelayer = new GTileLayer（myCopyright）; 
 
 //瓦片的属性我基于我的瓦片
 // v = w2.97& hl = en& x = 38598& s =& y = 49259& z = 17& amp ; s = Galil.png 
 tilelayer.getTileUrl = function（point，zoom）{
 if（zoom == 17&& point.x == 38598&& point.y == 49259）
返回../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吃纽约 tile：

在x = 38598和y = 49259在缩放级别17.

I want to create an overlay on top of Google Maps that displays different streets in different colors.

In the Google Maps API it is possible to create markers and polygons that cover certain areas.

Is there a way to somehow mark different streets?

解决方案

It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).

If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.

I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.

Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.

Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:

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)

This code overlays my Thing eats NY tile:

at x = 38598 and y = 49259 at zoom level 17.

这篇关于在Google地图中标记街道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！