Team:OUC-China/contactus

From 2012.igem.org

(Difference between revisions)
 
(3 intermediate revisions not shown)
Line 3: Line 3:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/oucigem2012-nav.css"><!--nav logo demo css-->
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/oucigem2012-nav.css"><!--nav logo demo css-->
 +
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 +
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<!--person CSS -->
<!--person CSS -->
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-igem-person.css">
<link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-igem-person.css">
Line 263: Line 265:
margin-bottom:0;
margin-bottom:0;
}
}
 +
#map{
 +
height:400px;
 +
width:600px;
 +
margin-top:-470px;
 +
left:390px;
 +
}
 +
</style>
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
-
 
+
<div id="map"></div>
-
  <!--百度地图容器-->
+
-
  <div style="width:600px;height:400px;border:#ccc solid 1px; left:390px;margin-top:-450px;;" id="dituContent"></div>
+
Line 280: Line 289:
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</script>
-
<script type="text/javascript">
+
-
try {
+
-
var pageTracker = _gat._getTracker("UA-2260508-2");
+
-
pageTracker._trackPageview();
+
-
} catch(err) {}</script>
+
<script type="text/javascript">
<script type="text/javascript">
     //创建和初始化地图函数：
     //创建和初始化地图函数：
     function initMap(){
     function initMap(){
         createMap();//创建地图
         createMap();//创建地图
-
        setMapEvent();//设置地图事件
+
     
-
        addMapControl();//向地图添加控件
+
-
        addMarker();//向地图中添加marker
+
     }
     }
      
      
     //创建地图函数：
     //创建地图函数：
     function createMap(){
     function createMap(){
-
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
+
      var map = L.map('map').setView([36.064,120.335], 13);
-
        var point = new BMap.Point(120.341773,36.06627);//定义一个中心点坐标
+
  L.tileLayer('http://{s}.tile.cloudmade.com/8de93dc447924179857a0d0ad7121605/997/256/{z}/{x}/{y}.png', {
-
        map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
+
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery ? <a href="http://cloudmade.com">CloudMade</a>',
-
        window.map = map;//将map变量存储在全局
+
    maxZoom: 18
 +
}).addTo(map);
 +
var marker = L.marker([36.064,120.335]).addTo(map);
     }
     }
 +
    initMap();//创建和初始化地图
      
      
-
    //地图事件设置函数：
+
var popup = L.popup();
-
    function setMapEvent(){
+
 
-
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
+
function onMapClick(e) {
-
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
+
     popup
-
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
+
         .setLatLng(e.latlng)
-
        map.enableKeyboard();//启用键盘上下左右键移动地图
+
         .setContent("You clicked the map at " + e.latlng.toString())
-
     }
+
         .openOn(map);
-
   
+
-
    //地图控件添加函数：
+
-
    function addMapControl(){
+
-
         //向地图中添加缩放控件
+
-
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
+
-
map.addControl(ctrl_nav);
+
-
         //向地图中添加缩略图控件
+
-
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
+
-
map.addControl(ctrl_ove);
+
-
         //向地图中添加比例尺控件
+
-
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
+
-
map.addControl(ctrl_sca);
+
-
    ctrl_sca.setUnit(BMAP_UNIT_IMPERIAL)
+
}
}
-
   
+
 
-
    //标注点数组
+
map.on('click', onMapClick);
-
    var markerArr = [{title:"OUC-China",content:"我的备注",point:"120.340543|36.066693",isOpen:0,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
+
-
];
+
-
    //创建marker
+
-
    function addMarker(){
+
-
        for(var i=0;i<markerArr.length;i++){
+
-
            var json = markerArr[i];
+
-
            var p0 = json.point.split("|")[0];
+
-
            var p1 = json.point.split("|")[1];
+
-
            var point = new BMap.Point(p0,p1);
+
-
var iconImg = createIcon(json.icon);
+
-
            var marker = new BMap.Marker(point,{icon:iconImg});
+
-
var iw = createInfoWindow(i);
+
-
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
+
-
marker.setLabel(label);
+
-
            map.addOverlay(marker);
+
-
            label.setStyle({
+
-
                        borderColor:"#808080",
+
-
                        color:"#333",
+
-
                        cursor:"pointer"
+
-
            });
+
-
+
-
(function(){
+
-
var index = i;
+
-
var _iw = createInfoWindow(i);
+
-
var _marker = marker;
+
-
_marker.addEventListener("click",function(){
+
-
    this.openInfoWindow(_iw);
+
-
    });
+
-
    _iw.addEventListener("open",function(){
+
-
    _marker.getLabel().hide();
+
-
    })
+
-
    _iw.addEventListener("close",function(){
+
-
    _marker.getLabel().show();
+
-
    })
+
-
label.addEventListener("click",function(){
+
-
    _marker.openInfoWindow(_iw);
+
-
    })
+
-
if(!!json.isOpen){
+
-
label.hide();
+
-
_marker.openInfoWindow(_iw);
+
-
}
+
-
})()
+
-
        }
+
-
    }
+
-
    //创建InfoWindow
+
-
    function createInfoWindow(i){
+
-
        var json = markerArr[i];
+
-
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
+
-
        return iw;
+
-
    }
+
-
    //创建一个Icon
+
-
    function createIcon(json){
+
-
        var icon = new BMap.Icon("http://map.baidu.com/image/us_cursor.gif", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
+
-
        return icon;
+
-
    }
+
-
   
+
-
    initMap();//创建和初始化地图
+
</script>
</script>
<div id="ouc-footer">
<div id="ouc-footer">

Latest revision as of 11:26, 25 October 2012

Contact US

We are looking forward to your letter!

SNS

SinaBlog:OAST

Renren: OAST

E-Mail

oucigem@163.com

Ocean University

Postal Code: 266003
Address: 5 YuShan Road,Qingdao,Shandong.

Retrieved from "http://2012.igem.org/Team:OUC-China/contactus"