More experiments.

2014-05-18 16:13:12 +08:00
parent 1c4773cade
commit b8709e1fe1
1 changed files with 57 additions and 9 deletions
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-<title>上海艺术地图 - by vinjn</title>
+<title>上海艺术地图</title>
 <link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.css"/>
 <style type="text/css">
    html, body {
@@ -32,6 +32,43 @@
 // 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="http://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:new AMap.LngLat(116.389267,39.925601), //基点位置  
+        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),
@@ -42,6 +79,8 @@ function mapInit(){
    //     mapObj.addControl(toolBar);       
    // });

+    // addBuildings();
+
    // 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)
@@ -54,13 +93,22 @@ function mapInit(){
                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 + '\n' + events[i].begin_time + ' ~ ' + events[i].end_time,
+                                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)
                });
+                // var idx = i;
+                // AMap.event.addListener(marker, 'click', function(e){
+                //     marker.setContent(events[idx].content);
+                // });
            };
        })
        .fail(function() {
-            alert('脦脼路篓路脙脦脢露鹿掳锚脥卢鲁脟API拢隆');
+            alert('Can not use douban api');
        });    
 }