搜尋此網誌

2015年10月20日 星期二

動態產生marker套疊於google map上

一般要在google map圖台上套疊marker
icon可以從網站目錄中取得
或從一個絕對的圖片路徑
但這些marker都是靜態的
也就是預先產生做好的icon



最近有個案子需求
marker必須是有意義的
例如長條圖、圓餅圖來代表該區域的特殊意義
於是就得動態產生這些marker

於是我就用ajax+泛型處理+製圖元件來達到

以下是長條圖的範例
javascript

  1. function createHistogramLayer(parameters) {  
  2.         $.ajax({  
  3.             url: "./Handler/HandlerHistogram.ashx" + '?' + $.param(parameters),  
  4.             type: "POST",  
  5.             dataType: "json",  
  6.             success: function (Jdata) {  
  7.                 var i = 0;  
  8.                 for (var numOfIndex in Jdata) {  
  9.                     var latLng = new google.maps.LatLng(Jdata[numOfIndex].y, Jdata[numOfIndex].x);  
  10.                     LayerMarker[i] = new google.maps.Marker({  
  11.                         position: latLng,  
  12.                         map: map,  
  13.                         icon: Jdata[numOfIndex].icon,  
  14.                         title: Jdata[numOfIndex].name + "\r\n" + Jdata[numOfIndex].desc  
  15.                     });  
  16.                     i++;  
  17.                 }  
  18.             },  
  19.             error: function () {  
  20.                 alert("讀取資料發生錯誤");  
  21.             }  
  22.         });  
  23.     }  
利用 ajax 呼叫 HandlerHistogram.ashx 動態組出 json
依照所輸入的條件，產生不同的長條圖
這裡我用到的製圖元件是ChartDirector
json 格式

  1. [  
  2.   {  
  3.       "id": "64",  
  4.       "name": "三灣鄉",  
  5.       "icon":"./images/tmp/20151020023106047.png",  
  6.       "desc":"101:11 / 102:10 / 103:5",  
  7.       "x":"120.95375",  
  8.       "y":"24.63135"  
  9.   },  
  10.   {  
  11.       "id": "61",  
  12.       "name": "三義鄉",  
  13.       "icon":"./images/tmp/20151020023106216.png",  
  14.       "desc":"101:2 / 102:1 / 103:4",  
  15.       "x":"120.7736",  
  16.       "y":"24.3794"  
  17.   },  
  18.   {  
  19.       "id": "57",  
  20.       "name": "公館鄉",  
  21.       "icon":"./images/tmp/20151020023106368.png",  
  22.       "desc":"101:3 / 102:0 / 103:1",  
  23.       "x":"120.85935",  
  24.       "y":"24.49795"  
  25.   },  
  26.   {  
  27.       "id": "55",  
  28.       "name": "卓蘭鎮",  
  29.       "icon":"./images/tmp/20151020023106521.png",  
  30.       "desc":"101:0 / 102:0 / 103:1",  
  31.       "x":"120.8434",  
  32.       "y":"24.32675"  
  33.   },  
  34.   {  
  35.       "id": "59",  
  36.       "name": "南庄鄉",  
  37.       "icon":"./images/tmp/20151020023106677.png",  
  38.       "desc":"101:10 / 102:1 / 103:9",  
  39.       "x":"121.01565",  
  40.       "y":"24.5692"  
  41.   },  
  42.   {  
  43.       "id": "56",  
  44.       "name": "大湖鄉",  
  45.       "icon":"./images/tmp/20151020023106832.png",  
  46.       "desc":"101:6 / 102:6 / 103:3",  
  47.       "x":"120.84755",  
  48.       "y":"24.39825"  
  49.   },  
  50.   {  
  51.       "id": "54",  
  52.       "name": "後龍鎮",  
  53.       "icon":"./images/tmp/20151020023107002.png",  
  54.       "desc":"101:0 / 102:0 / 103:1",  
  55.       "x":"120.7743",  
  56.       "y":"24.6168"  
  57.   },  
  58.   {  
  59.       "id": "66",  
  60.       "name": "泰安鄉",  
  61.       "icon":"./images/tmp/20151020023107164.png",  
  62.       "desc":"101:4 / 102:0 / 103:2",  
  63.       "x":"121.08275",  
  64.       "y":"24.4047"  
  65.   },  
  66.   {  
  67.       "id": "65",  
  68.       "name": "獅潭鄉",  
  69.       "icon":"./images/tmp/20151020023107320.png",  
  70.       "desc":"101:9 / 102:1 / 103:1",  
  71.       "x":"120.9196",  
  72.       "y":"24.52285"  
  73.   },  
  74.   {  
  75.       "id": "52",  
  76.       "name": "竹南鎮",  
  77.       "icon":"./images/tmp/20151020023107504.png",  
  78.       "desc":"101:1 / 102:0 / 103:0",  
  79.       "x":"120.87935",  
  80.       "y":"24.6943"  
  81.   },  
  82.   {  
  83.       "id": "50",  
  84.       "name": "苑裡鎮",  
  85.       "icon":"./images/tmp/20151020023107654.png",  
  86.       "desc":"101:1 / 102:1 / 103:1",  
  87.       "x":"120.6851",  
  88.       "y":"24.4092"  
  89.   },  
  90.   {  
  91.       "id": "49",  
  92.       "name": "苗栗市",  
  93.       "icon":"./images/tmp/20151020023108122.png",  
  94.       "desc":"101:2 / 102:0 / 103:0",  
  95.       "x":"120.8117",  
  96.       "y":"24.5589"  
  97.   },  
  98.   {  
  99.       "id": "62",  
  100.       "name": "西湖鄉",  
  101.       "icon":"./images/tmp/20151020023108280.png",  
  102.       "desc":"101:2 / 102:1 / 103:0",  
  103.       "x":"120.7583",  
  104.       "y":"24.53435"  
  105.   },  
  106.   {  
  107.       "id": "51",  
  108.       "name": "通霄鎮",  
  109.       "icon":"./images/tmp/20151020023108439.png",  
  110.       "desc":"101:4 / 102:2 / 103:3",  
  111.       "x":"120.70445",  
  112.       "y":"24.48915"  
  113.   },  
  114.   {  
  115.       "id": "63",  
  116.       "name": "造橋鄉",  
  117.       "icon":"./images/tmp/20151020023108565.png",  
  118.       "desc":"101:14 / 102:10 / 103:3",  
  119.       "x":"120.8814",  
  120.       "y":"24.6279"  
  121.   },  
  122.   {  
  123.       "id": "58",  
  124.       "name": "銅鑼鄉",  
  125.       "icon":"./images/tmp/20151020023108665.png",  
  126.       "desc":"101:1 / 102:0 / 103:8",  
  127.       "x":"120.7981",  
  128.       "y":"24.4609"  
  129.   },  
  130.   {  
  131.       "id": "53",  
  132.       "name": "頭份鎮",  
  133.       "icon":"./images/tmp/20151020023108768.png",  
  134.       "desc":"101:8 / 102:7 / 103:4",  
  135.       "x":"120.92655",  
  136.       "y":"24.6692"  
  137.   },  
  138.   {  
  139.       "id": "60",  
  140.       "name": "頭屋鄉",  
  141.       "icon":"./images/tmp/20151020023108876.png",  
  142.       "desc":"101:9 / 102:2 / 103:2",  
  143.       "x":"120.88515",  
  144.       "y":"24.57145"  
  145.   }  
  146. ]  
最後將json解析套疊在google map圖台上



以下是圓餅圖的範例
javascript

  1. function createViolationLayer(parameters) {  
  2.         $.ajax({  
  3.             url: "./Handler/HandlerViolation.ashx" + '?' + $.param(parameters),  
  4.             type: "POST",  
  5.             dataType: "json",  
  6.             success: function (Jdata) {  
  7.                 var i = 0;  
  8.                 for (var numOfIndex in Jdata) {  
  9.                     var latLng = new google.maps.LatLng(Jdata[numOfIndex].y, Jdata[numOfIndex].x);  
  10.                     LayerMarker[i] = new google.maps.Marker({  
  11.                         position: latLng,  
  12.                         map: map,  
  13.                         icon: Jdata[numOfIndex].icon,  
  14.                         title: Jdata[numOfIndex].name + "\r\n違規:" + Jdata[numOfIndex].yes + " / 非違規:" + Jdata[numOfIndex].no  
  15.                     });  
  16.                     i++;  
  17.                 }  
  18.             },  
  19.             error: function () {  
  20.                 alert("讀取資料發生錯誤");  
  21.             }  
  22.         });  
  23.     }  
json格式
  1. [  
  2.   {  
  3.       "id": "64",  
  4.       "name": "三灣鄉",  
  5.       "icon":"./images/tmp/20151020025403819.png",  
  6.       "yes":"26",  
  7.       "no":"97",  
  8.       "x":"120.95375",  
  9.       "y":"24.63135"  
  10.   },  
  11.   {  
  12.       "id": "61",  
  13.       "name": "三義鄉",  
  14.       "icon":"./images/tmp/20151020025403968.png",  
  15.       "yes":"7",  
  16.       "no":"47",  
  17.       "x":"120.7736",  
  18.       "y":"24.3794"  
  19.   },  
  20.   {  
  21.       "id": "57",  
  22.       "name": "公館鄉",  
  23.       "icon":"./images/tmp/20151020025404099.png",  
  24.       "yes":"4",  
  25.       "no":"74",  
  26.       "x":"120.85935",  
  27.       "y":"24.49795"  
  28.   },  
  29.   {  
  30.       "id": "55",  
  31.       "name": "卓蘭鎮",  
  32.       "icon":"./images/tmp/20151020025404237.png",  
  33.       "yes":"1",  
  34.       "no":"75",  
  35.       "x":"120.8434",  
  36.       "y":"24.32675"  
  37.   },  
  38.   {  
  39.       "id": "59",  
  40.       "name": "南庄鄉",  
  41.       "icon":"./images/tmp/20151020025404375.png",  
  42.       "yes":"20",  
  43.       "no":"81",  
  44.       "x":"121.01565",  
  45.       "y":"24.5692"  
  46.   },  
  47.   {  
  48.       "id": "56",  
  49.       "name": "大湖鄉",  
  50.       "icon":"./images/tmp/20151020025404511.png",  
  51.       "yes":"15",  
  52.       "no":"127",  
  53.       "x":"120.84755",  
  54.       "y":"24.39825"  
  55.   },  
  56.   {  
  57.       "id": "54",  
  58.       "name": "後龍鎮",  
  59.       "icon":"./images/tmp/20151020025404652.png",  
  60.       "yes":"1",  
  61.       "no":"39",  
  62.       "x":"120.7743",  
  63.       "y":"24.6168"  
  64.   },  
  65.   {  
  66.       "id": "66",  
  67.       "name": "泰安鄉",  
  68.       "icon":"./images/tmp/20151020025404790.png",  
  69.       "yes":"6",  
  70.       "no":"120",  
  71.       "x":"121.08275",  
  72.       "y":"24.4047"  
  73.   },  
  74.   {  
  75.       "id": "65",  
  76.       "name": "獅潭鄉",  
  77.       "icon":"./images/tmp/20151020025404930.png",  
  78.       "yes":"11",  
  79.       "no":"43",  
  80.       "x":"120.9196",  
  81.       "y":"24.52285"  
  82.   },  
  83.   {  
  84.       "id": "52",  
  85.       "name": "竹南鎮",  
  86.       "icon":"./images/tmp/20151020025405068.png",  
  87.       "yes":"1",  
  88.       "no":"32",  
  89.       "x":"120.87935",  
  90.       "y":"24.6943"  
  91.   },  
  92.   {  
  93.       "id": "50",  
  94.       "name": "苑裡鎮",  
  95.       "icon":"./images/tmp/20151020025405207.png",  
  96.       "yes":"3",  
  97.       "no":"20",  
  98.       "x":"120.6851",  
  99.       "y":"24.4092"  
  100.   },  
  101.   {  
  102.       "id": "49",  
  103.       "name": "苗栗市",  
  104.       "icon":"./images/tmp/20151020025405343.png",  
  105.       "yes":"2",  
  106.       "no":"38",  
  107.       "x":"120.8117",  
  108.       "y":"24.5589"  
  109.   },  
  110.   {  
  111.       "id": "62",  
  112.       "name": "西湖鄉",  
  113.       "icon":"./images/tmp/20151020025405488.png",  
  114.       "yes":"3",  
  115.       "no":"13",  
  116.       "x":"120.7583",  
  117.       "y":"24.53435"  
  118.   },  
  119.   {  
  120.       "id": "51",  
  121.       "name": "通霄鎮",  
  122.       "icon":"./images/tmp/20151020025405634.png",  
  123.       "yes":"9",  
  124.       "no":"42",  
  125.       "x":"120.70445",  
  126.       "y":"24.48915"  
  127.   },  
  128.   {  
  129.       "id": "63",  
  130.       "name": "造橋鄉",  
  131.       "icon":"./images/tmp/20151020025405774.png",  
  132.       "yes":"27",  
  133.       "no":"60",  
  134.       "x":"120.8814",  
  135.       "y":"24.6279"  
  136.   },  
  137.   {  
  138.       "id": "58",  
  139.       "name": "銅鑼鄉",  
  140.       "icon":"./images/tmp/20151020025405913.png",  
  141.       "yes":"9",  
  142.       "no":"99",  
  143.       "x":"120.7981",  
  144.       "y":"24.4609"  
  145.   },  
  146.   {  
  147.       "id": "53",  
  148.       "name": "頭份鎮",  
  149.       "icon":"./images/tmp/20151020025406053.png",  
  150.       "yes":"19",  
  151.       "no":"62",  
  152.       "x":"120.92655",  
  153.       "y":"24.6692"  
  154.   },  
  155.   {  
  156.       "id": "60",  
  157.       "name": "頭屋鄉",  
  158.       "icon":"./images/tmp/20151020025406195.png",  
  159.       "yes":"13",  
  160.       "no":"76",  
  161.       "x":"120.88515",  
  162.       "y":"24.57145"  
  163.   }  
  164. ]  
套疊結果



希望提供有這需求的人參考
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)