代码之家 › 专栏 › 技术社区 › arbithero

谷歌地图如何在DIV上绘制路线?

html javascript

arbithero · 技术社区 · 14 年前

我很好奇Google Maps是如何在googlemaps的DIV元素上绘制蓝色路线的。我知道如何在Canvas元素上进行,但Google maps不使用HTML5画布,它们在DIV上绘制复杂的线条。

他们是怎么做到的?

要清楚的是:我想知道当我们得到从A点到B点的方向时,他们是如何画出蓝线的。而不是路线是如何计算的。

谢谢

3 回复 | 直到 14 年前

Dave L 14 年前

不久以前,他们使用在服务器端渲染的图像。当前的解决方案是在主要浏览器中使用矢量图形API。

他们现在在非IE浏览器上使用SVG( Mozilla SVG )IE使用VML(包括IE9测试版)( VML on Wikipedia ). IE9 Beta支持SVG,因此我预计IE9+将来也会使用SVG。

使用Firebug或IE开发工具,您可以看到SVG(SVG标记)/VML(形状标记)标记。

编辑:阅读你的评论。我希望它是通常呈现的SVG/VML标记与通过Javascript进行的实时更改(如路由更改)的组合

Jason 14 年前

http://code.google.com/apis/maps/documentation/javascript/services.html#DraggableDirections

“方向显示为多段线图形”。

这是多段线覆盖,请参见: http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polylines

Druid Moorthy 12 年前

当您请求路由、解析点或地址时,Google的服务器将检索result对象( APi Reference of Result Object )wich包含了很多用来在地图上画“蓝线”的信息。在地图上画线的功能是 DirectionsRenderer.setDirections(response) .

内部 setDirections ,Google所做的基本上是读取响应的 LatLngs 把它画成地图上的多段线。多段线没有点的限制。