谷歌地图api3中的折线问题

Question

转：icecold  

谷歌地图api3中的折线问题

在谷歌提供的地图api中，Polyline是一个非常重要的类 ，最近客户要求在地图中动态的显示出某一辆车在一个时间段内的路线，就可以用这个类进行解决。

数据库中存放着车辆每隔一段时间上传的经纬度信息，由经纬度信息可以得到该车在谷歌地图上的点。

下面这个是增加折线的方法：

view sourceprint?

1. 1 //增加折线  
3. 2         function addPath(coordinates){  
5. 3             path = new google.maps.Polyline({  
7. 4               path: coordinates,  
9. 5               strokeColor: "#FF0000",  
11. 6               strokeOpacity: 1.0,  
13. 7               strokeWeight: 2
15. 8             });  
17. 9         }

复制代码这个方法主要为折线提供了所需要的基本信息，coordinates是一个数组，通过一个循环可以将数据库中查出来的经纬度对象放到其中，然后在Polyline中为path提供，进而可以得到一个圆满的直线。

view sourceprint?

1. 1 for(var i=0;i<storeCount;i++){  
3. 2                                     var record = latlngStore.getAt(i);  
5. 3                                     lng = record.get('longitude'); //经度  
7. 4                                     lat = record.get('latitude'); //纬度  
9. 5                                     var mylatlng = new google.maps.LatLng(lat,-lng);  
11. 6                                     coordinates.push(mylatlng);  
13. 7                                 } //for方法结束      
15. 8                            addPath(coordinates);  
17. 9                            path.setMap(map);

复制代码上面的代码是调用addPath方法显示出折线的循环，另外，最后一句中的path.setMap(map)非常重要，其目的在于将path和map相关联并显示出来。

另外，关于折线的擦出在api中也给出了方法，因为代码中要求不停地复用，所以我将其都分别写成了一个个函数。

下面的是擦出折线的方法：

view sourceprint?

1. //清除折线  
3.         function clearLine(){  
5.             path.setMap(null);  
7.             if (coordinates) {      
9.                 for (var i=0;i<coordinates.length;i++) {         
11.                     coordinates[i]=null;   
13.                 }   
15.                 coordinates.length = 0;     
17.             }  
19.         }

复制代码记得一定要在loadPage方法的开始将path进行初始化

在上面的清除折线的方法中，也一定要记得有那个if判断，将coordinates数组中的对象全部清除，否则，会出现上一次的没有擦掉，下一次的继续在上面画出来的现象。

从来没有什么能够阻挡我前进的步伐，今天没有，明天也不会有。

Answer 1

好繁琐的代码