beijing-art-map/index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<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%;
        margin: 0;
    }
    body {
        overflow:hidden;
    }
    #iCenter {
        min-height: 100%; 
    }
</style>
<!--[if lte IE 6]>
<style type="text/css">
    #container {
        height: 100%;
    }
</style>
<![endif]-->

<script language="javascript" src="https://webapi.amap.com/maps?v=1.3&key=c782dab5eb7efe1269dbc13cd77b9801
"></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;

function addBuildings(){  
    if (typeof(Worker) !== "undefined") {  
        var buildings = new AMap.Buildings(); //实例化3D楼块图层  
        buildings.setMap(mapObj);//在map中添加3D楼块图层  
    } else {
        // document.getElementById("info").innerHTML="对不起，运行该示例需要浏览器支持HTML5！";  
    }  
}  


//添加带文本的点标记覆盖物  
function addMarker(){   
    //自定义点标记内容     
    var markerContent = document.createElement("div");  
    markerContent.className = "markerContentStyle";  
      
    //点标记中的图标  
    var markerImg= document.createElement("img");  
     markerImg.className="markerlnglat";  
     markerImg.src="https://webapi.amap.com/images/0.png";     
     markerContent.appendChild(markerImg);  
       
     //点标记中的文本  
     var markerSpan = document.createElement("span");  
     markerSpan.innerHTML = "我是自定义样式的点标记哦！";  
     markerContent.appendChild(markerSpan);  
     marker = new AMap.Marker({  
        map:mapObj,  
        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
    });
    // mapObj.plugin(["AMap.ToolBar"],function(){        
    //     toolBar = new AMap.ToolBar();  
    //     mapObj.addControl(toolBar);       
    // });

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

    // https://github.com/unixcrh/DOUBANTONGCHENG/blob/master/DouBanTongCheng/ContentVC.m
    // https://developers.douban.com/wiki/?title=event_v2
    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>',
    ];

    // 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)
                    });

                    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() {
                console.log('Can not use douban api');
            }); 
    });   
}

</script>
</head>
<body onLoad="mapInit()">
    <div id="iCenter"></div>
</body>
</html>
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								<!DOCTYPE HTML>
-												First commit.

											
										
										
											2014-05-11 12:26:47 +08:00
+								<html>
 								<head>
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-												More experiments.

											
										
										
											2014-05-18 16:13:12 +08:00
+								<title>上海艺术地图</title>
-												Using https

											
										
										
											2017-07-15 11:35:43 +08:00
+								<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
-												Add new types of events.
Add icons of events.

											
										
										
											2017-07-15 11:23:29 +08:00
+								<!-- <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
-												First commit.

											
										
										
											2014-05-11 12:26:47 +08:00
+								<style type="text/css">
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								    html, body {
 								        height: 100%;
 								        margin: 0;
 								    }
 								    body {
 								        overflow:hidden;
 								    }
 								    #iCenter {
 								        min-height: 100%;
 								    }
-												First commit.

											
										
										
											2014-05-11 12:26:47 +08:00
+								</style>
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								<!--[if lte IE 6]>
 								<style type="text/css">
 								    #container {
 								        height: 100%;
 								    }
 								</style>
 								<![endif]-->
-												Using https

											
										
										
											2017-07-15 11:35:43 +08:00
+								<script language="javascript" src="https://webapi.amap.com/maps?v=1.3&key=c782dab5eb7efe1269dbc13cd77b9801
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								"></script>
-												Using https

											
										
										
											2017-07-15 11:35:43 +08:00
+								<script src="https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								<script language="javascript">
-												First commit.

											
										
										
											2014-05-11 12:26:47 +08:00
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								// http://api.amap.com/javascript/index
 								// http://api.amap.com/javascript/example
 								var mapObj;
-												More experiments.

											
										
										
											2014-05-18 16:13:12 +08:00
 								function addBuildings(){
 								    if (typeof(Worker) !== "undefined") {
 								        var buildings = new AMap.Buildings(); //实例化3D楼块图层
 								        buildings.setMap(mapObj);//在map中添加3D楼块图层
 								    } else {
 								        // document.getElementById("info").innerHTML="对不起，运行该示例需要浏览器支持HTML5！";
 								    }
 								}
 								//添加带文本的点标记覆盖物
 								function addMarker(){
 								    //自定义点标记内容
 								    var markerContent = document.createElement("div");
 								    markerContent.className = "markerContentStyle";
 								    //点标记中的图标
 								    var markerImg= document.createElement("img");
 								     markerImg.className="markerlnglat";
-												Using https

											
										
										
											2017-07-15 11:35:43 +08:00
+								     markerImg.src="https://webapi.amap.com/images/0.png";
-												More experiments.

											
										
										
											2014-05-18 16:13:12 +08:00
+								     markerContent.appendChild(markerImg);
 								     //点标记中的文本
 								     var markerSpan = document.createElement("span");
 								     markerSpan.innerHTML = "我是自定义样式的点标记哦！";
 								     markerContent.appendChild(markerSpan);
 								     marker = new AMap.Marker({
 								        map:mapObj,
-												Update links to js / css

											
										
										
											2017-07-15 10:42:29 +08:00
+								        position:mapObj.center, //基点位置
-												More experiments.

											
										
										
											2014-05-18 16:13:12 +08:00
+								        offset:new AMap.Pixel(-18,-36), //相对于基点的偏移位置
 								        draggable:true,  //是否可拖动
 								        content:markerContent   //自定义点标记覆盖物内容
-												Update links to js / css

											
										
										
											2017-07-15 10:42:29 +08:00
+								    });
-												More experiments.

											
										
										
											2014-05-18 16:13:12 +08:00
+								    marker.setMap(mapObj);  //在地图上添加点
 								}
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								function mapInit(){
 								    mapObj = new AMap.Map("iCenter", {
 								        center: new AMap.LngLat(121.473267,31.222715),
 								        level:  13
 								    });
 								    // mapObj.plugin(["AMap.ToolBar"],function(){
-												More experiments.

											
										
										
											2014-05-18 16:13:12 +08:00
+								    //     toolBar = new AMap.ToolBar();
 								    //     mapObj.addControl(toolBar);
 								    // });
 								    // addBuildings();
-												Update links to js / css

											
										
										
											2017-07-15 10:42:29 +08:00
+								    // addMarker();
-												First commit.

											
										
										
											2014-05-11 12:26:47 +08:00
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								    // https://github.com/unixcrh/DOUBANTONGCHENG/blob/master/DouBanTongCheng/ContentVC.m
-												Update links to js / css

											
										
										
											2017-07-15 10:42:29 +08:00
+								    // https://developers.douban.com/wiki/?title=event_v2
-												Add new types of events.
Add icons of events.

											
										
										
											2017-07-15 11:23:29 +08:00
+								    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>',
 								    ];
-												Fix #1

											
										
										
											2014-05-19 22:33:20 +08:00
-												Add new types of events.
Add icons of events.

											
										
										
											2017-07-15 11:23:29 +08:00
+								    // 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)
 								                    });
 								                    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));
-												Use Object.prototype.forEach to replace the common for loop.

											
										
										
											2014-05-20 21:10:29 +08:00
-												Add new types of events.
Add icons of events.

											
										
										
											2017-07-15 11:23:29 +08:00
+								                    AMap.event.addListener(marker, 'click', function() {
 								                        // marker_.setContent(ev.content);
 								                        window.open(ev.alt,'mywin','');
 								                    });
-												Use Object.prototype.forEach to replace the common for loop.

											
										
										
											2014-05-20 21:10:29 +08:00
+								                });
-												Add new types of events.
Add icons of events.

											
										
										
											2017-07-15 11:23:29 +08:00
+								            })
 								            .fail(function() {
-												Nopppe

											
										
										
											2017-07-15 11:43:56 +08:00
+								                console.log('Can not use douban api');
-												Add new types of events.
Add icons of events.

											
										
										
											2017-07-15 11:23:29 +08:00
+								            });
 								    });
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								}
-												First commit.

											
										
										
											2014-05-11 12:26:47 +08:00
 								</script>
-												First playable version.

											
										
										
											2014-05-18 00:35:18 +08:00
+								</head>
 								<body onLoad="mapInit()">
 								    <div id="iCenter"></div>
 								</body>
 								</html>