Team:OUC-China/contactus

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
 
<head>
<head>
<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 264:
margin-bottom:0;
margin-bottom:0;
}
}
 +
#map{
 +
height:400px;
 +
width:600px;
 +
margin-top:-450px;
 +
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 288:
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">

Revision as of 10:01, 25 October 2012

<head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="stylesheet" href="http://1.oucigem.sinaapp.com/oucigem2012-nav.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://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script> <link rel="stylesheet" href="http://1.oucigem.sinaapp.com/ouc-igem-person.css">

<script> $(document).ready(function(){ $("img.static").hover( function() { $(this).stop().animate({"opacity": "0"}, "350"); }, function() { $(this).stop().animate({"opacity": "1"}, "350"); }); }); </script>



</head> <body>

<section id="wrapper"> <article id="main">

Contents

Contact US

We are looking forward to your letter!

SNS

           <a href="http://blog.sina.com.cn/oast"><p1>SinaBlog:OAST</a></p1>
<a href="http://www.renren.com/296396903/profile?ref=opensearch_normal">

Renren: OAST

</a>

E-Mail

<a href="mailto:oucigem@163.com">oucigem@163.com</a>

Ocean University

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

<style type="text/css"> 

   html,body{margin:0;padding:0;}
   .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
   .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
   #contact h3{

font-size:150%; } #contact p{ font-size:100%; margin-bottom:80px; border-bottom:none; color:#000; }

  1. contact a{

text-decoration:underline; color:#000; } #ouc-footer{ margin-top:120px; }

  1. footer{

margin-bottom:0; border:none; }

  1. footer-box{

height: 50px;

width:1349px; margin-top:10px; margin-bottom:-10px; background-color:#1487DF; border:none; padding-left:0; padding-right:0; }

  1. top-section{

width:99%; }

  1. main p1

{ margin-bottom:0; }

  1. map{

height:400px; width:600px; margin-top:-450px; left:390px; }

</style> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>


</article> </section> </body> <script type="text/javascript" src="http://1.oucigem.sinaapp.com/OUC-nav.js"></script> <script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script>

<script type="text/javascript"> 

   //创建和初始化地图函数：
   function initMap(){
       createMap();//创建地图
     
   }
   
   //创建地图函数：
   function createMap(){
      var map = L.map('map').setView([36.064,120.335], 13);

L.tileLayer('http://{s}.tile.cloudmade.com/8de93dc447924179857a0d0ad7121605/997/256/{z}/{x}/{y}.png', { 

   attribution: 'Map data © <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>',
   maxZoom: 18

}).addTo(map); var marker = L.marker([36.064,120.335]).addTo(map); 

   }
   initMap();//创建和初始化地图

var popup = L.popup();

function onMapClick(e) { 

   popup
       .setLatLng(e.latlng)
       .setContent("You clicked the map at " + e.latlng.toString())
       .openOn(map);

}

map.on('click', onMapClick); </script>

</html>

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