westdc-zf1/application/default/views/scripts/hiwater/timemap.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->theme->AppendPlus($this,'google_map_v3');
$this->theme->AppendPlus($this,'colorbox');
$this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/timemap.2.0.1/lib/mxn/mxn.js?(googlev3)');
$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
$this->nav[] = array('link'=>"/hiwater",'title'=>'黑河生态水文遥感试验');
?>
<style>
img{max-width:none}
</style>
<?= $this->render('breadcrumbs.phtml'); ?>
<div class="row">
    <div class="span3">
    	<?= $this->partial('hiwater/navi.phtml'); ?>
    </div>
    <div class="span9">
<div id="timemap">
	<div id="timeline" style="height:500px;border-right:1px solid #abc;width:50%;float:left;"></div> 
    <div id="map" style="height:500px;"></div>
</div>
	</div>
</div>

<script type="text/javascript" charset="utf-8">
$('#map').height($(window).height());
$('#timeline').height($(window).height());
$("html,body").animate({scrollTop:$('#timemap').offset().top},600);
var tm;
$(function() {
    
    // make a custom map style
    var styledMapType = new google.maps.StyledMapType([
        {
            featureType: "water",
            elementType: "all",
            stylers: [
              { saturation: 0 },
              { lightness: 100 }
            ]
        },
        {
            featureType: "all",
            elementType: "all",
            stylers: [
              { saturation: -100 }
            ]
        }
    ], {
        name: "white"
    });
    
    tm = TimeMap.init({
        mapId: "map",               // Id of map div element (required)
        timelineId: "timeline",     // Id of timeline div element (required)
        scrollTo: "2012-05-01",
        options: {
            eventIconPath: "../images/"
        },
        datasets: [
            {
                id: "artists",
                title: "Artists",
                theme: "orange",
                // note that the lines below are now the preferred syntax
                type: "basic",
                options: {
                    items: [
                <?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" : {
                            "infoHtml": "<div class='info'><a href=/hiwater/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.DECADE
        ]
    });
    
    // set the map to our custom style
    var gmap = tm.getNativeMap();
    gmap.mapTypes.set("white", styledMapType);
    gmap.setMapTypeId("white");
});

</script>