bob
/
westdc-zf1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

import timemap 2.0.1, add colorbox support, use google loader api to load gmaps later

This commit is contained in:
wlx 2011-11-08 08:06:15 +00:00
parent 5684a7ca1c
commit 37264ae8a1
1 changed files with 40 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
application/default/views/scripts/heihe/timemap.phtml
View File

@ -9,21 +9,49 @@ $this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('<a href="/heihe/">'.$this->config->title->heihe.'</a>');
$this->breadcrumb('时空联合导航');
$this->breadcrumb()->setSeparator(' > ');
$this->headScript()->appendFile('http://maps.google.cn/maps?file=api&v=2&key='.$this->config->google->maps->api);
//$this->headScript()->appendFile('http://maps.google.cN/maps?file=api&v=2&key='.$this->config->google->maps->api);
$this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/timemap/timemap.js');
$this->headScript()->captureStart();
$this->headScript()->appendFile('/js/jquery-1.7.min.js');
$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(google)');
$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
$this->headScript()->appendFile('/js/jquery.colorbox-min.js');
$this->headLink()->appendStylesheet('/css/colorbox.css');
?>
<div id='sidebar'>
<div id='leftnavi'>
<?= $this->partial('heihe/navi.phtml'); ?>
</div>
</div>
<div id='right'>
<div id="timemap">
<div id="watermap" style="height:500px;width:40%;float:right;"></div>
<div id="timeline" style="height:500px;border-right:1px solid #abc;"></div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
var tm;
window.onload=function() {
$(window).bind("load", function() { var timeout = setTimeout(function() { initLoader(); }, 100);});
//$(window).bind("load", function() { var timeout = setTimeout(function() { gmaploaded(); }, 1000);});
function loadMaps() {
google.load("maps", "2", {"callback" : tmloaded,"base_domain": "ditu.google.cn"});
}
function initLoader() {
var script = document.createElement("script");
script.src = "https://www.google.com/jsapi?key=<?php echo $this->config->google->maps->api; ?>&callback=loadMaps";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function tmloaded() {
tm = TimeMap.init({
mapId: "watermap", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
scrollTo: "2008-06-01",
scrollTo: "2000-01-01",
options: {
eventIconPath: "../images/",
mapType:G_SATELLITE_MAP,
mapType:G_HYBRID_MAP,
mapCenter: new GLatLng(39,100)
},
datasets: [
@ -44,10 +72,10 @@ window.onload=function() {
"lat" : <?php echo ($row['south']+$row['north'])/2; ?>,
"lon" : <?php echo ($row['west']+$row['east'])/2; ?>
},
"title" : "<?php echo htmlspecialchars(mb_substr($row['title'],11,mb_strlen($row['title'],'UTF-8')-10,'UTF-8')); ?>",
"title" : "<?php echo htmlspecialchars($row['title']); ?>",
"options" : {
// set the full HTML for the info window
"infoHtml": "<div class='info'><a href=/heihe/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> /></div>",
"infoHtml": "<div class='info'><a href=/heihe/view/uuid/<?php echo $row['uuid']; ?>><?php echo htmlspecialchars($row['title']); ?></a><hr /><img src=/service/thumb/id/<?php echo $row['id']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' /></div>",
"theme":"orange"
}
},
@ -57,25 +85,12 @@ window.onload=function() {
}
],
bandIntervals: [
Timeline.DateTime.DAY,
Timeline.DateTime.MONTH
Timeline.DateTime.MONTH,
Timeline.DateTime.YEAR
]
});
// manipulate the timemap further here if you like
var map=tm.map;
map.setCenter(new GLatLng(39,100),7);
}
window.onunload=GUnload();
<?php $this->headScript()->captureEnd(); ?>
<div id='sidebar'>
<div id='leftnavi'>
<?= $this->partial('heihe/navi.phtml'); ?>
</div>
</div>
<div id='right'>
<div id="timemap">
<div id="watermap" style="height:500px;width:40%;float:right;"></div>
<div id="timeline" style="height:500px;border-right:1px solid #abc;"></div>
</div>
</div>
</script>