96 lines
4.1 KiB
PHTML
96 lines
4.1 KiB
PHTML
|
<?php
|
||
|
|
$this->headTitle($this->config->title->site);
|
||
|
|
$this->headTitle($this->config->title->data);
|
||
|
|
$this->headTitle('时空导航');
|
||
|
|
$this->headTitle()->setSeparator(' - ');
|
||
|
|
$this->headLink()->appendStylesheet('/css/water.css');
|
||
|
|
$this->breadcrumb('<a href="/">首页</a>');
|
||
|
|
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
|
||
|
|
$this->breadcrumb('<a href="/yrnmr/">'.$this->config->title->yrnmr.'</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('/js/timeline_var.js');
|
||
|
|
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
|
||
|
|
$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('yrnmr/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).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: "2000-01-01",
|
||
|
|
options: {
|
||
|
|
eventIconPath: "../images/",
|
||
|
|
mapType:G_HYBRID_MAP,
|
||
|
|
mapCenter: new GLatLng(39,100)
|
||
|
|
},
|
||
|
|
datasets: [
|
||
|
|
{
|
||
|
|
data:{
|
||
|
|
theme: "orange",
|
||
|
|
// note that the lines below are now the preferred syntax
|
||
|
|
type: "basic",
|
||
|
|
value: [
|
||
|
|
<?php foreach($this->rows as $row) : ?>
|
||
|
|
{
|
||
|
|
"start" : "<?php echo $row['timebegin']; ?>",
|
||
|
|
<?php if ($row['timeend']!='') : ?>
|
||
|
|
"end" : "<?php echo $row['timeend']; ?>",
|
||
|
|
<?php endif; ?>
|
||
|
|
"point" :
|
||
|
|
{
|
||
|
|
"lat" : <?php echo ($row['south']+$row['north'])/2; ?>,
|
||
|
|
"lon" : <?php echo ($row['west']+$row['east'])/2; ?>
|
||
|
|
},
|
||
|
|
"title" : "<?php echo htmlspecialchars($row['title']); ?>",
|
||
|
|
"options" : {
|
||
|
|
// set the full HTML for the info window
|
||
|
|
"infoHtml": "<div class='info'><a href=/yrnmr/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"
|
||
|
|
}
|
||
|
|
},
|
||
|
|
<?php endforeach; ?>
|
||
|
|
]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
],
|
||
|
|
bandIntervals: [
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
</script>
|