From 43eb281b4439dbb4dcd0572b81105ae6fd07b3c0 Mon Sep 17 00:00:00 2001
From: vinjn <vinjn.z@gmail.com>
Date: Sat, 15 Jul 2017 11:23:29 +0800
Subject: [PATCH] Add new types of events. Add icons of events.

---
 index.html             | 102 +++++++++++++++++++++++++----------------
 media/camera.png       | Bin 0 -> 644 bytes
 media/college.png      | Bin 0 -> 652 bytes
 media/music-player.png | Bin 0 -> 534 bytes
 media/theater.png      | Bin 0 -> 1008 bytes
 5 files changed, 62 insertions(+), 40 deletions(-)
 create mode 100644 media/camera.png
 create mode 100644 media/college.png
 create mode 100644 media/music-player.png
 create mode 100644 media/theater.png

diff --git a/index.html b/index.html
index c863f57..bedba65 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
 <title>上海艺术地图</title>
 <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
+<!-- <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
 <style type="text/css">
     html, body {
         height: 100%;
@@ -84,49 +85,70 @@ function mapInit(){
 
     // https://github.com/unixcrh/DOUBANTONGCHENG/blob/master/DouBanTongCheng/ContentVC.m
     // https://developers.douban.com/wiki/?title=event_v2
-    
-    var doubanApi = "https://api.douban.com/v2/event/list?loc=shanghai&type=exhibition&max-results=50&callback=?";
-    $.getJSON(doubanApi)
-        .done(function(json){
-            //response json are now in the json variable
-            // console.log(json);
-            json.events.forEach(function(ev, i) {
-                var geo = ev.geo.split(' ');
-                var marker = new AMap.Marker({
-                    map:        mapObj,
-                    position:   new AMap.LngLat(geo[1], geo[0]),
-                    icon:       "http://webapi.amap.com/images/1.png",
-                    // icon:       ev.owner.alt.match('site') ? new AMap.Icon({
-                    //                 image: ev.owner.avatar,
-                    //             }) : null,
-                    // label:      "vvvvvv",
-                    title:      ev.title + '\n' + 
-                                ev.address.replace(/上海(\s+|市)/g, '') + '\n' + 
-                                ev.begin_time.substring(5, ev.begin_time.length - 3) + ' ~ ' + 
-                                ev.end_time.substring(5, ev.end_time.length - 3)
-                });
+    var doubanEvents = [
+        "https://api.douban.com/v2/event/list?loc=shanghai&type=music&max-results=30&callback=?",
+        "https://api.douban.com/v2/event/list?loc=shanghai&type=drama&max-results=30&callback=?",
+        "https://api.douban.com/v2/event/list?loc=shanghai&type=film&max-results=30&callback=?",
+        "https://api.douban.com/v2/event/list?loc=shanghai&type=exhibition&max-results=30&callback=?",
+    ];
+    // http://fontawesome.io/icons/
+    var doubanIcons = [
+        '<i class="fa fa-music" aria-hidden="true"></i>',
+        '<i class="fa fa-magic" aria-hidden="true"></i>',
+        '<i class="fa fa-film" aria-hidden="true"></i>',
+        '<i class="fa fa-paint-brush" aria-hidden="true"></i>',
+    ];
 
-                marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
-                    offset: new AMap.Pixel(20, 20),//修改label相对于maker的位置
-                    content: ev.title
-                });
-                // closure based
-                // AMap.event.addListener(marker, 'click', function(marker_, i_) {
-                //     return function() {
-                //         // marker_.setContent(json.events[i_].content);
-                //         window.open(json.events[i_].alt,'mywin','');
-                //     };
-                // }(marker, i));
+    // http://www.flaticon.com/
+    var doubanFlatIcons = [
+        'media/music-player.png',
+        'media/theater.png',
+        'media/camera.png',
+        'media/college.png',
+    ];
+    doubanEvents.forEach(function(doubanEvent, i) {
+        $.getJSON(doubanEvent)
+            .done(function(json){
+                //response json are now in the json variable
+                // console.log(json);
+                json.events.reverse().forEach(function(ev, j) {
+                    var geo = ev.geo.split(' ');
+                    var marker = new AMap.Marker({
+                        map:        mapObj,
+                        position:   new AMap.LngLat(geo[1], geo[0]),
+                        icon:       doubanFlatIcons[i],
+                        // icon:       ev.owner.alt.match('site') ? new AMap.Icon({
+                        //                 image: ev.owner.avatar,
+                        //             }) : null,
+                        // label:      "vvvvvv",
+                        title:      ev.title + '\n' + 
+                                    ev.address.replace(/上海(\s+|市)/g, '') + '\n' + 
+                                    ev.begin_time.substring(5, ev.begin_time.length - 3) + ' ~ ' + 
+                                    ev.end_time.substring(5, ev.end_time.length - 3)
+                    });
 
-                AMap.event.addListener(marker, 'click', function() {
-                    // marker_.setContent(ev.content);
-                    window.open(ev.alt,'mywin','');
+                    marker.setLabel({//label默认蓝框白底左上角显示，样式className为：amap-marker-label
+                        offset: new AMap.Pixel(26, 0),//修改label相对于maker的位置
+                        content: ev.title
+                    });
+                    // closure based
+                    // AMap.event.addListener(marker, 'click', function(marker_, i_) {
+                    //     return function() {
+                    //         // marker_.setContent(json.events[i_].content);
+                    //         window.open(json.events[i_].alt,'mywin','');
+                    //     };
+                    // }(marker, i));
+
+                    AMap.event.addListener(marker, 'click', function() {
+                        // marker_.setContent(ev.content);
+                        window.open(ev.alt,'mywin','');
+                    });
                 });
-            });
-        })
-        .fail(function() {
-            alert('Can not use douban api');
-        });    
+            })
+            .fail(function() {
+                alert('Can not use douban api');
+            }); 
+    });   
 }
 
 </script>
diff --git a/media/camera.png b/media/camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..ee834eadcb8c5f617b316019fda7c4fa6c3a2947
GIT binary patch
literal 644
zcmV-~0(<?5P)<h;3K|Lk000e1NJLTq000;O000;W0{{R3*Qw3Q00003b3#c}2nYz<
z;ZNWI000SaNLh0L005@|005@}4>}#(0000PbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}
zWiD@WXPfRk8UO$Q>QGEnMgRZ*W|_=ruH0&>)o`!hZL#2QuH9;&$7!C$Z?fWUvEgp7
z-)^ztY^Bd`vf*v0)NZljZn5EQs@86;+HSGoK}S<UN>@csUPe-3N?dPGRb@|Mc2HMn
zQeALUV02Voaa3b?R%(7$cavCbf?0o_T5yM4gQQ@Mv0-wCVs(pRleuGnn`42UW0AIG
zYk6dCdt`2XWpIIJdXQ#&k!F08XMUDvo5N?F#%G|)Xo;q2i>PUgs%eg`X`#$&mbhw{
zyK1D*YNgR@o55?J$7`t6YpB(0sn%?w%WS34ZK%|3u-|U3-EOepZn5Fs{!>f<000$q
zQchC<1r``EOH5l_YJY%$i?X@U=IHwR6O@OU0002%Nkl<ZC{u-!=~lup5QV3u6&j#W
zET}B9Dx$I|LfQANK;Hj#NT%hO_Rz!kFLNh1nVSGO$STndLno>XB2vtxE+&!w>q?Re
zB$aDj<L#%}7+IaEsk!}VGy3^M+AC&<dnCu_cj6fJ#@vmc6XVN;_3>>XjW26UDPi~I
zM!S4gpv25%2*1?_bSc)e1>3eCAYRU8UTPkp*lKm6kYGak$uD$uNZk~MMu0Fk0;~=?
z9{ybM37s>6NcH{m=)3NEPgMv#vH>?9;S~pTBI!2;rWnaJL=PCE8@q_92oELJwR=w+
e{2AcJ_qhNr|4@Ul0M`rv0000<MNUMnLSTa6HYR@n

literal 0
HcmV?d00001

diff --git a/media/college.png b/media/college.png
new file mode 100644
index 0000000000000000000000000000000000000000..198022b89bae8dd8dfad19dcc9655cddb10f7786
GIT binary patch
literal 652
zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM3?#3wJbMaAF&8^|hH!9j+<xf)0LbMm@Q5r1
z(knoivGU92V?c&viEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$Qb0vl1AIbU
z|NsAQY@DX&7Hi;@VC)@l>>X$11wrvJMx35gn1NdqkZbCbVBr;G8IWx4mtf<cU>lNd
z7n<Q5l;j+d=@OFc5|!%_lj9jz;G0w&m|7N+R2ZF67L!>XpHr1o(vn}@QdrwoT-RRP
zGi%1em9v*`nzMB6{N?LcZ{D?L^R9K<_O9Q$XZ^Ol8+Pp9u=DW79s4%#I<RH;p>2B)
zZ`*%j*MZ}^51!b2=;Waj=Z>7Zc=R+7T{?OG`l<8R&Ro2H=F*Kz*Y94wares2`*$Bc
zd-n3(sbrUapa*$Mg8YIRSj7yyv+5f*U3m8EYt(Kx1_nk!PZ!4!2}#z2r}Kmz1sD#@
zde^IdNKv6l@jxSU$N&F&BHV(1?tJ|cbd^C+aN(*|4Q#j4ybeT66P0@MjE~{8&4eAV
zg&9(`CcWXb`KH~mA~dU($?jjpEPsVt6MnH({M%<=znb|(Y08&|Z(mRU`~2<u@-l|p
zl(HB0+v|VLHrv1N|A%~qJWJn-Kc;+n&nCZq_Os;Z45r($dCN4@cJFe1cWmMersLE1
zt*`rkefMe8d2xLm4A0w*Cds^d$g_xnp`nY3fgwwa;oM{0hFMuE2P%0Q0t3yzcniC>
zmc5M73Vl))?RWj_CYRa%r+;p}Wt9D-b`8UVtEm|~ZmTdze0Ey2N|j;SYhKRR7nls5
k?Oed9q~sJD%J`o#cu)PuoW)*;fPu!~>FVdQ&MBb@03M<!@&Et;

literal 0
HcmV?d00001

diff --git a/media/music-player.png b/media/music-player.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a0abbcdabb1f2de225cad98d44f5f6bc958696f
GIT binary patch
literal 534
zcmV+x0_pvUP)<h;3K|Lk000e1NJLTq000;O000;W0{{R3*Qw3Q00003b3#c}2nYz<
z;ZNWI000SaNLh0L00v_K00v_LO^6!20000PbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}
zWiD@WXPfRk8UO$Qv`|b`MgRZ*>10UhV@T>_N9tlo>S9RhVo2&_Na|-u>S;*oYDnsA
zNa}4!>u*Twa7gQMNb7S*>vTx#c}VMeNb7q@>wHM-eo5<pN$Y?~>w!t^gGua(N$iVB
z?2bw7k4fy2N$izL?3YRHo=NSWN$sUc?WalYs!8pvN$ssk?yyPjvPtf<O76Ex?zl?s
zxk~Q3O76Q#?!8Lxze?`GO7Fx<@5f5-$V%_YO7F``@61Z?%}VdiN@fxkmH+?%26R$R
zQvfb%sNMSdSuGm?006>CL_t(2&z;g)6M`TR0ALhFvob5qPP;5CJM6N<|Np;QNSzV!
z#eIR@j{$}SAtYgi6hgrgf{;~G3RQ;nf;xzVFjvw#t^)%``Ti|?vh>6IH%YGa9F*0q
zBo7KChkhN1qhRHYtR@EsBb_xk*pYf*&Rh|+L%7sY0DJzr_S|6*Gl()6-XJ?uxG>nH
zpgma{KsI>6<YA`J{XfK(rux($YixITcKyR(QEV@5l=p`ENiP6qtu?%LuhiPg&rtP!
YexgDqRDVB3IsgCw07*qoM6N<$f>Z_bA^-pY

literal 0
HcmV?d00001

diff --git a/media/theater.png b/media/theater.png
new file mode 100644
index 0000000000000000000000000000000000000000..7f0cd208342495927852b6d38bb0df0c88f82e72
GIT binary patch
literal 1008
zcmV<M0}uR(P)<h;3K|Lk000e1NJLTq000;O000;W0{{R3*Qw3Q00003b3#c}2nYz<
z;ZNWI000SaNLh0L005={005=|-F^Q!0000PbVXQnQ*UN;cVTj60C#tHE@^ISb7Ns}
zWiD@WXPfRk8UO$R)KE-RMgRZ*GntwHnE)4;q8pE&8<L<Jkf9vMxf+q78j+!to>Ur<
zpiY*38j+#&tQ*y*E*ikM9k{a^k)axxr5(q-_N^cv&cGUxp&!n{8JeXUk)axrp&FE<
z8kM6Oo~9b4sT#1a8n&_<k)Ruqp&OZ{8=a>co~Ik9s~f1S8?CMzxU(C%v>Us%8@#m}
zzP22Zpd6;G9J8?;yS5y}x*fo|9m2RB$GaWLy&jRC9+ICP#=IWKydKHD9?HHR%f24W
zz8}oMAI-oY&%q$i!647VAke}glAR)wog<Q)B$ApWlAA4(lr7G=FqD-ry{R&jkTcG;
zG?b4zm5)1?k2}n-JeG}0mVrvkrCOSPU6^-Yn|ffHcx#$%aGPy{n_h#TWQCnxiJ@bQ
zxNVT0R+6Dxlc8Fgp;exvR-&O!rJ+ozp-HQuNU)_!vZ6z^r%Ae{LBFIs!KFOJr8&o{
zK+UH$&Z;`pv_00UG}@^y;;AX*t}*GXDe12+>Z~a1tS9TQE9|T$?65BFttauWCGxK(
z@~|lKu`BYiEc34?^Rq1UuO;-cD)q4`^|C7Vu_yPiCHJx@_^~GVvnlzrDf+P_`m!ea
zvnTqqDEhQ1`?Dzfv?%+uDQuqSfdBvi8FW%kQvd}87BEX{ZGV8UvcS;U-QM2j=<WCU
z`uu7U<Wv9v0clA@K~yMHb&^$A12GVVQz~pJMHVRx?(S|ygB30A?(XjHUMTZt$&%f|
z1Kg*aZ!$AE_l6KIwN@~QqCwEAWx%D<n?ROHQ2lU?Q9_o!l<$&Jqi~&cJ$&Q==jA4y
ze4p{$!98SZkt^RlDkE5?uO*B);hzy79KfcrJx(qQJ8v8#Zii7yOS6-cJe-M}0zYP_
z5F4m0KjNblR%#9rhs)C9%F2r<^(F3%y&QZZt{t<}I?XAj6(OP2o4CH=ofY~&dD|5q
zR8BpKxQXv)r*>svlf1)=i0zIy;rS|daGoy`1I#J>rF$7$Q)ANE?pOm6p!$UKn@(87
zy2Olx0COe?L<`Vse;ybg>!}3T!Ynq&ToMFYqGnFb;BA}aQRC}TU;(9tQD9=R=owkU
z$I%FA-p3(;=tu?xZX&>>4eu|X@S=*_E1Ae`hpr79;;!|#?Q&31Tc5|VBPb<WML*I0
e{~5?1-{%Vho`^isp>aY00000<MNUMnLSTaW<=yxI

literal 0
HcmV?d00001