change shanghai to beijing for fun.

Clean
Clean up
2017-07-31 14:35:02 +08:00 · 2017-07-15 12:25:24 +08:00 · 2017-07-15 11:50:01 +08:00 · 2017-07-15 11:43:56 +08:00 · 2017-07-15 11:40:36 +08:00 · 2017-07-15 11:35:43 +08:00
6 changed files with 89 additions and 43 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-shanghai-art-map
+beijing-art-map
 ================

-上海艺术地图
+北京艺术地图
--- a/index.html
+++ b/index.html
@@ -2,8 +2,9 @@
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-<title>上海艺术地图</title>
-<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css"/>
+<title>北京艺术地图</title>
+<link rel="stylesheet" href="https://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%;
@@ -24,18 +25,18 @@
 </style>
 <![endif]-->

-<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=c782dab5eb7efe1269dbc13cd77b9801
+<script language="javascript" src="https://webapi.amap.com/maps?v=1.3&key=c782dab5eb7efe1269dbc13cd77b9801
 "></script>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
+<script src="https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script> 
 <script language="javascript">

 // http://api.amap.com/javascript/index
 // http://api.amap.com/javascript/example
-var mapObj;
+let mapObj;

 function addBuildings(){  
    if (typeof(Worker) !== "undefined") {  
-        var buildings = new AMap.Buildings(); //实例化3D楼块图层  
+        let buildings = new AMap.Buildings(); //实例化3D楼块图层  
        buildings.setMap(mapObj);//在map中添加3D楼块图层  
    } else {
        // document.getElementById("info").innerHTML="对不起，运行该示例需要浏览器支持HTML5！";  
@@ -46,33 +47,33 @@ function addBuildings(){
 //添加带文本的点标记覆盖物  
 function addMarker(){   
    //自定义点标记内容     
-    var markerContent = document.createElement("div");  
+    let markerContent = document.createElement("div");  
    markerContent.className = "markerContentStyle";  
      
    //点标记中的图标  
-    var markerImg= document.createElement("img");  
+    let markerImg= document.createElement("img");  
     markerImg.className="markerlnglat";  
-     markerImg.src="http://webapi.amap.com/images/0.png";     
+     markerImg.src="https://webapi.amap.com/images/0.png";     
     markerContent.appendChild(markerImg);  
       
     //点标记中的文本  
-     var markerSpan = document.createElement("span");  
+     let markerSpan = document.createElement("span");  
     markerSpan.innerHTML = "我是自定义样式的点标记哦！";  
     markerContent.appendChild(markerSpan);  
     marker = new AMap.Marker({  
        map:mapObj,  
-        position:new AMap.LngLat(116.389267,39.925601), //基点位置  
+        position:mapObj.center, //基点位置  
        offset:new AMap.Pixel(-18,-36), //相对于基点的偏移位置  
        draggable:true,  //是否可拖动  
        content:markerContent   //自定义点标记覆盖物内容  
-    });  
+    });
    marker.setMap(mapObj);  //在地图上添加点  
 }

 function mapInit(){
    mapObj = new AMap.Map("iCenter", {
-        center: new AMap.LngLat(121.473267,31.222715),
-        level:  13
+        center: new AMap.LngLat(116.39,39.9),
+        level:  12
    });
    // mapObj.plugin(["AMap.ToolBar"],function(){        
    //     toolBar = new AMap.ToolBar();  
@@ -80,36 +81,81 @@ function mapInit(){
    // });

    // addBuildings();
+    // addMarker();

    // https://github.com/unixcrh/DOUBANTONGCHENG/blob/master/DouBanTongCheng/ContentVC.m
-    var doubanApi = "https://api.douban.com/v2/event/list?loc=shanghai&type=exhibition&max-results=100&callback=?";
-    $.getJSON(doubanApi)
-        .done(function(json){
-            //response json are now in the json variable
-            console.log(json);
-            var events = json.events;
-            for (var i = events.length - 1; i >= 0; i--) {
-                var geo = events[i].geo.split(' ');
-                var marker = new AMap.Marker({
-                    map:        mapObj,
-                    position:   new AMap.LngLat(geo[1], geo[0]),
-                    // icon:       events[i].owner.alt.match('site') ? new AMap.Icon({
-                    //                 image: events[i].owner.avatar,
-                    //             }) : null,
-                    title:      events[i].title + '\n' + 
-                                events[i].address.replace(/上海(\s+|市)/g, '') + '\n' + 
-                                events[i].begin_time.substring(5, events[i].begin_time.length - 3) + ' ~ ' + 
-                                events[i].end_time.substring(5, events[i].end_time.length - 3)
+    // https://developers.douban.com/wiki/?title=event_v2
+    let doubanEvents = [
+        "https://api.douban.com/v2/event/list?loc=beijing&type=music&max-results=30&callback=?",
+        "https://api.douban.com/v2/event/list?loc=beijing&type=drama&max-results=30&callback=?",
+        "https://api.douban.com/v2/event/list?loc=beijing&type=film&max-results=30&callback=?",
+        "https://api.douban.com/v2/event/list?loc=beijing&type=exhibition&max-results=30&callback=?",
+    ];
+    // http://fontawesome.io/icons/
+    let 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>',
+    ];
+
+    // http://www.flaticon.com/
+    let doubanFlatIcons = [
+        'media/music-player.png',
+        'media/theater.png',
+        'media/camera.png',
+        'media/college.png',
+    ];
+
+    let fail_to_access_douban = false;
+    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) {
+                    ev.title = ev.title.replace(/北京(\s+|市|站)/g, '')
+                    let geo = ev.geo.split(' ');
+                    let 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)
+                    });
+
+                    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','');
+                    });
                });
-                // var idx = i;
-                // AMap.event.addListener(marker, 'click', function(e){
-                //     marker.setContent(events[idx].content);
-                // });
-            };
-        })
-        .fail(function() {
-            alert('Can not use douban api');
-        });    
+            })
+            .fail(function( jqxhr, textStatus, error ) {                
+                if (!fail_to_access_douban) {
+                    let err = textStatus + ", " + error;
+                    alert( "Access douban failed: " + err );
+                }
+                fail_to_access_douban = true;
+            }); 
+    });   
 }

 </script>
--- a/media/camera.png
+++ b/media/camera.png
--- a/media/college.png
+++ b/media/college.png
--- a/media/music-player.png
+++ b/media/music-player.png
--- a/media/theater.png
+++ b/media/theater.png
Author	SHA1	Message	Date
pezy	b95264248a	change shanghai to beijing for fun.	2017-07-31 14:35:02 +08:00
vinjn	8d1289336a	Clean	2017-07-15 12:25:24 +08:00
vinjn	92f7dccda8	Clean up	2017-07-15 11:50:01 +08:00
vinjn	82173872af	Nopppe	2017-07-15 11:43:56 +08:00
vinjn	b0e5bd8de2	WAR wechat issue	2017-07-15 11:40:36 +08:00
vinjn	96df89ff6b	Using https	2017-07-15 11:35:43 +08:00
vinjn	43eb281b44	Add new types of events. Add icons of events.	2017-07-15 11:23:29 +08:00
vinjn	2aa4d7039f	Update links to js / css	2017-07-15 10:42:29 +08:00
vinjn	9126a29c9f	Use Object.prototype.forEach to replace the common for loop.	2014-05-20 21:10:29 +08:00
vinjn	99aa0c3a4d	Fix #1	2014-05-19 22:33:20 +08:00