- 论坛徽章:
- 0
|
上海电子艺术节想在正式网站上提供给大家这样一个平台，叫做Publics' chosen artworks,意思就是您可以将您身边发现的艺术作品发到我们的官方网站为您提供的地图上，并及时用标志注明，那么其他人来到这张地图上，就可以看到您的作品。同时，您可以看到别人上传的作品，别人也可以上传作品。（注：为防止一些人利用此平台上传广告、诽谤、暴力、色情等等信息，“及时”这一内容会有所打折，但是计划内的审核周期是比较短的，所以，从某种意义上讲也是及时的。）同时，我们计划把这一架构加入到英国Channel 4的一个BigArtMob的大框架中，也就是说您上传的作品会在上海本地发布的同时，发到英国Channel 4的平台；同时，全世界人都会看到上海这里在发生着什么——上海电子艺术节！
那么，Channel 4的平台是以Google Maps为基础，加上一家叫做Moblog Technology的公司做的JavaScript脚本实现的，但是Google Map的国际版并没有中国的地图（除台湾省），所以，就要将此工作迁移到谷歌（中国）的Google Ditu上面来。切入正题，就是说，要把地图文件从Navtaq公司的换成Mapabc的。并且，将功能在中国的Google Maps API上实现。
关于Google Maps API，您可以登陆Google地图自己有所了解。说简单些，就是Google提供的一个免费的开源的地图的接口。下面的网址是其官方的一个参考手册http://www.google.com/apis/maps/documentation/reference.html
那么，如何利用Google提供的接口，作为上海电子艺术节筹备团队中的一名计算机专业的实习生，我自愿进行摸索与试探。所以，昨天周六加了一天班，今天上午在机房研究了一上午，终于搞定了功能的Core。（非核心程序就交给我们官方网站的制作公司帮忙搞定吧）
那么，因为都是开源，所以，一是为了宣传上海电子艺术节，二是将这一技术让更多的人知道（我是李开复先生的粉丝），我在下面也将程序核心公开，希望您多提意见。
请将下面文件保存到同一目录下：
---------------sheartsmapbeta.html-----------------
---------------是网页的HTML文件---------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shanghai eArts Map beta (Powered by LoRD Q!)</title>
<script src="http://ditu.google.com/maps?file=api&v=2" type="text/javascript"></script>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="mainBody">
<div id="topBody">
<div id="guideBar"><a href="mailto:info@shearts.org">Contact Us</a> | <a href="http://www.shearts.org">中文</a> | <a href="http://www.shearts.org/eindex.html">English</a></div>
<div id="logo"><img src="http://www.shearts.org/images/pic4.jpg" alt="Logo" width="300" height="108" /></div>
</div>
<div class="contentbox">
<div id="contenttext">
<div id="map" style="width: 795px; height: 480px"></div>
<script type="text/javascript" src="position.js"></script>
<script type="text/javascript" src="map.js"></script>
<div id="power" style="font:verdana, helvetica, arial, sans-serif; color:#66FFFF;">Powered by <a href="http://qilongyi.blog.sohu.com" style="color:#66FFFF">LoRD Q!</a></div>
</div>
</div>
<div id="bottom">
<div id="join" style="color:#FFFFFF;">Please join Shanghai eArts online or in Shanghai to exchange and debate visionary ideas and innovations</div>
<div id="contact">For more information, please contact: Tel: +86 21 32260502 Fax: +86 21 62814671 E-mail: info@shearts.org</div>
<div id="secondStripe"><div id="copyRight"></div>
</div>
</div>
</div>
</body>
</html>
---------------layout.css-----------------
---------------是css布局文件---------------
@charset "utf-8";
body {
background-color: #000000;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
font-size: 0.7em;
}
#mainBody {
width: 830px;
margin: auto;
}
#topBody {
height: 128px;
}
#logo {
float: right;
width: 300px;
height: 108px;
padding-top: 20px;
}
#content {
float: right;
height: 380px;
width: 250px;
padding-left: 15px;
}
#change {
margin-top: 6px;
font-size: 14px;
line-height: 15px;
}
#guideBar {
float: left;
padding-top: 50px;
margin-left: 27px;
color: #FFFFFF;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
#postscript {
color: #DD0021;
font-size: 9px;
text-align: right;
margin-top: 5px;
margin-right: 3px;
}
#guideBar a:hover, #guideBar a:link, #guideBar a:visited, #guideBar a:active {
color: #FFFFFF;
text-decoration: none;
}
#firstStripe, #secondStripe {
height: 16px;
width: 795px;
margin-left: 27px;
background-image: url('http://www.shearts.org/images/stripe.jpg');
background-repeat: repeat-x
}
#bottom {
height: 55px;
width: 795px;
float: left;
}
#join {
font-size: 12px;
height: 20px;
padding-left: 30px;
}
#contact {
height: 17px;
width: 780px;
color: #45484D;
font-size: 11px;
font-weight: bold;
padding-left: 15px;
margin-left: 15px;
}
#copyRight {
height: 16px;
width: 140px;
text-align: right;
float: right;
background-image: url('http://www.shearts.org/images/copyright.jpg');
background-repeat: no-repeat
}
h1 { font-size: 110%}
h2 { font-size: 110%}
h3 { font-size: 100%}
h1, h2, h3 {text-transform:capitalize}
.contentbox {
width: 795px;
text-align: left;
padding-left: 27px;
margin-bottom: 15px;
margin-top: 15px;
}
.contenttext {
padding: 0px;
margin-right:20px /* NEW */;
}
.contentbox form {margin-right:20px}
.contenttext li {
list-style-image: url('none');
padding-top: 7px
}
---------------map.js-----------------
---------------是实现功能的程序--------
var map_div = document.getElementById("map");
var debug = document.getElementById("debug");
var map = new GMap2(map_div)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.enableContinuousZoom();
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_blue.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
var icon_highlight = new GIcon();
icon_highlight.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon_highlight.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon_highlight.iconSize = new GSize(12, 20);
icon_highlight.shadowSize = new GSize(22, 20);
icon_highlight.iconAnchor = new GPoint(6, 20);
icon_highlight.infoWindowAnchor = new GPoint(5, 1);
if(eArts) loadJSON(eArts);
if(fallback) alert('No item(s) to display. The current view will be the default Shanghai eArts Map');
function createMarker(point, html, id, type) {
if (type) {
var marker = new GMarker(point, {draggable: true, icon: icon_highlight, bouncy: true});
}
else
var marker = new GMarker(point, {draggable: true, icon: icon, bouncy: true});
marker.id = id;
GEvent.addListener(marker, "click", function() {marker.openInfoWindowHtml(unescape(html));} );
GEvent.addListener(marker, "dragstart", function() { lastpos=marker.getPoint() })
GEvent.addListener(marker, "dragend", function() { marker.setPoint(lastpos) });
map.addOverlay(marker);
return marker
}
function loadJSON(eArts, center) {
if (eArts.areaShanghai) {
minLat = eArts.areaShanghai.min_lat
maxLat = eArts.areaShanghai.max_lat
minLng = eArts.areaShanghai.min_lng
maxLng = eArts.areaShanghai.max_lng
debug = 'maxLat ' + maxLat + ' minLat'+ minLat + ' maxLng ' + maxLng + ' minLng ' + minLng
bounds = new GLatLngBounds(new GLatLng(minLat, minLng), new GLatLng(maxLat, maxLng));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds), (hybridmap?G_HYBRID_MAP:G_NORMAL_MAP));
}
for (var i=0; i < eArts.artworks.length; i++) {
lat = eArts.artworks.lat
lng = eArts.artworks.lng
worksID = eArts.artworks.worksID
artist = eArts.artworks.artist
worksname = eArts.artworks.worksname
city = eArts.artworks.city
view_link = eArts.artworks.view_link
snap = eArts.artworks.snap
user = eArts.artworks.user
place = eArts.artworks.place
point = new GLatLng(lat, lng);
debug="item " + worksname + "lat: "+lat +"lng: " + lng
html = "<div style=\"height: 240 px\"><h1>" + worksname +" by "
if(artist) html += artist +"</h1>"
else html += "Unknown </h1>"
html += '<p>Upload by ' + user +'</p>'
html += '<p><img src="media'+ snap+ '" /></p>'
html += "<small>"+place+"</small><br/>"
html += '<p> ';
html += "<a href=" + view_link + ">View the detail</a> </p></div>";
markers.push(createMarker(point, html, worksID, eArts.artworks.highlight));
}
}
---------------position.js-----------------
---------------是录入艺术作品地点的程序（当前为静态，由我们的官方网站制作公司制作成动态）----
eArts={
"artworks":
[
{'worksID': 1,
'worksname': 'Fire Ball',
'artist': 'Du Zhenjun',
'user': 'Shanghai eArts',
'snap': '',
'city': 'Shanghai',
'place': 'Century Road, Pudong New Area, Shanghai',
'highlight': true,
'lat': 31.22005, 'lng': 121.542263,
'view_link': ''
},
{'worksID': 2,
'worksname': 'Need for your support',
'artist': null,
'user': 'YOU',
'snap': '',
'city': 'Shanghai',
'place': 'Just around you',
'highlight': false,
'lat': 31.224300, 'lng': 121.30,
'view_link': ''
},
],
"areaShanghai":{'min_lat': 30.9, 'max_lng': 121.8, 'min_lng': 121, 'max_lat': 31.6}
};
hybridmap = false;
fallback = false;
markers = Array()
---------END--------- |
|
免费注册
发表于 2008-07-28 15:43
