jQuery- TinyMap 路線導航及繪製圖形

最近要來玩google map api，所以先來用tinymap熱身一下。

plugin網址
TinyMap


導航

view plaincopy to clipboardprint

1. $('#map').tinyMap({   
2.         center: '台北市松山區健康路146號',   
3.         zoom: 13,   
4.         direction: [{   
5.         from: '台北市松山區健康路146號',   
6.         waypoint: ['台北市八德路3段105號'],   
7.         to: '台北市信義區市府路1號',   
8.         travel: 'driving'  
9.         }]   
10.     });   

Demo

路徑規劃

view plaincopy to clipboardprint

1. [{   
2.   from: '起點地址',   
3.   to: '目的地址',   
4.   waypoint: ['中途點1', '中途點2'...],   
5.   optimize: '是否最佳化路徑 true|false 預設 false  
6.   travel: '交通類型：DRIVING|WALKING|BICYCLING'  
7. }...]  

繪製圖形

view plaincopy to clipboardprint

1. $('#map').tinyMap({   
2.         //center: '台北市松山區健康路146號',   
3.         zoom: 13,   
4.         polyline: {   
5.         coords: [   
6.             [25.05176362315452, 121.54683386230465],   
7.             [25.0587614830369, 121.55301367187496],   
8.             [25.05673992011185, 121.56005178833004],   
9.         ],   
10.         color: '#008800',   
11.         width: 2   
12.     },   
13.     polygon: {   
14.         coords: [   
15.             [25.05922799282222, 121.52348791503903],   
16.             [25.05580687982226, 121.52331625366207],   
17.             [25.05425179688806, 121.52795111083981],   
18.             [25.05751744826025, 121.53378759765621],   
19.             [25.064048489938642, 121.52915274047848],   
20.             [25.05922799282222, 121.52348791503903]   
21.         ],   
22.         color: '#000033',   
23.         fillcolor: '#0000cc',   
24.         width: 1,   
25.         click: function (e) {   
26.             alert('this is polygon');   
27.         }   
28.     },   
29.     circle: [   
30.         {   
31.             center: {x: 25.047924, y: 121.51708099999996},   
32.             radius: 500,   
33.             width: 1,   
34.             color: '#333333',   
35.             fillcolor: '#999999',   
36.         },   
37.         {   
38.             center: {x: 25.038, y: 121.56399999999996},   
39.             radius: 400,   
40.             widrth: 3,   
41.             color: '#FF0000',   
42.             fillcolor: '#CC0000',   
43.         }   
44.     ]   
45.     });  

Demo

繪製線條

view plaincopy to clipboardprint

1. {   
2.   coords: [[Lat1, Lng1], [Lat2, Lng2]...] Array,   
3.   color: 線條顏色 e.g. '#FF0000' 預設 '#FF0000',   
4.   width: 線條寬度 預設: 2   
5. }  

繪製多邊形

view plaincopy to clipboardprint

1. {   
2.   coords: [[Lat1, Lng1], [Lat2, Lng2]...] Array,   
3.   color: 線條顏色 e.g. '#FF0000' 預設 '#FF0000',   
4.   fillcolor: 填充顏色 e.g. '#FF0000' 預設 '#CC0000',   
5.   width: 線條寬度 預設: 2,   
6.   click: Click 事件 (Function) 預設 null  
7. }  

繪製圓形

view plaincopy to clipboardprint

1. [{   
2.   center: {x: Lat, y: Lng} 圓心座標 JSON,   
3.   radius: 圓形半徑，單位: 公尺 預設 100,   
4.   width: 線條寬度 (Integer) 預設 2,   
5.   color: 線條顏色 e.g. '#FF0000' 預設 '#FF0000',   
6.   fillcolor: 填充顏色 e.g. '#FF0000' 預設 '#FF0000',   
7.   click: Click 事件 (Function) 預設 null  
8. }...]