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

張貼者： 日期：
最近要來玩google map api，所以先來用tinymap熱身一下。

plugin網址
TinyMap

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. }...]  

tinyMap
繪製圖形
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. }...]  

留言

張貼留言