采用gmaps v3以及指定到全屏高度并自动滚动

This commit is contained in:
wlx 2013-04-13 01:34:01 +00:00
parent 7845c99a92
commit af8fa13c61
1 changed files with 84 additions and 77 deletions

View File

@ -8,92 +8,99 @@ $this->breadcrumb('<a href="/">首页</a>');
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>'); $this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
$this->breadcrumb('<a href="/data/timeline">时空导航</a>'); $this->breadcrumb('<a href="/data/timeline">时空导航</a>');
$this->breadcrumb()->setSeparator(' > '); $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('http://maps.google.cN/maps/api/js?sensor=false');
$this->headScript()->appendFile('/js/timeline_var.js'); $this->headScript()->appendFile('/js/timeline_var.js');
$this->headScript()->appendFile('/js/timeline_js/timeline-api.js'); $this->headScript()->appendFile('/js/timeline_js/timeline-api.js');
$this->headScript()->appendFile('/js/jquery-1.7.min.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/lib/mxn/mxn.js?(googlev3)');
$this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js'); $this->headScript()->appendFile('/js/timemap.2.0.1/timemap.pack.js');
$this->headScript()->appendFile('/js/jquery.colorbox-min.js'); $this->headScript()->appendFile('/js/jquery.colorbox-min.js');
$this->headLink()->appendStylesheet('/css/colorbox.css'); $this->headLink()->appendStylesheet('/css/colorbox.css');
?> ?>
<div class="row-fluid"><?= $this->partial('data/tools.phtml'); ?></div> <div class="row-fluid"><?= $this->partial('data/tools.phtml'); ?></div>
<div id="timemap" style="clear:both;"> <div id="timemap">
<div id="timeline" style="height:300px;width:100%;"></div> <div id="map" style="height:500px;width:50%;float:right;"></div>
<div id="map" style="height:300px;"></div> <div id="timeline" style="height:500px;border-right:1px solid #abc;"></div>
</div>
<script type="text/javascript" charset="utf-8"> </div>
var tm; <script type="text/javascript" charset="utf-8">
$(window).bind("load", function() { var timeout = setTimeout(function() { initLoader(); }, 100);}); $('#map').height($(window).height());
//$(window).bind("load", function() { var timeout = setTimeout(function() { gmaploaded(); }, 1000);}); $('#timeline').height($(window).height());
function loadMaps() { $("html,body").animate({scrollTop:$('#timemap').offset().top},600);
google.load("maps", "2", {"callback" : tmloaded,"base_domain": "ditu.google.cn"}); var tm;
} $(function() {
function initLoader() { // make a custom map style
var script = document.createElement("script"); var styledMapType = new google.maps.StyledMapType([
script.src = "https://www.google.com/jsapi?key=<?php echo $this->config->google->maps->api; ?>&callback=loadMaps"; {
script.type = "text/javascript"; featureType: "water",
document.getElementsByTagName("head")[0].appendChild(script); elementType: "all",
} stylers: [
function tmloaded() { { saturation: 0 },
tm = TimeMap.init({ { lightness: 100 }
mapId: "map", // Id of map div element (required) ]
timelineId: "timeline", // Id of timeline div element (required) },
options: { {
eventIconPath: "../images/", featureType: "all",
mapType:G_NORMAL_MAP elementType: "all",
}, stylers: [
datasets: [ { saturation: -100 }
{ ]
id: "artists", }
title: "Artists", ], {
theme: "orange", name: "white"
// note that the lines below are now the preferred syntax });
type: "basic",
options: { tm = TimeMap.init({
items: [ mapId: "map", // Id of map div element (required)
timelineId: "timeline", // Id of timeline div element (required)
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 <?php
foreach($this->rows as $row) : ?> foreach($this->rows as $row) : ?>
{ {
"start" : "<?php echo $row['timebegin']; ?>", "start" : "<?php echo $row['timebegin']; ?>",
<?php if ($row['timeend']!='') : ?> <?php if ($row['timeend']!='') : ?>
"end" : "<?php echo $row['timeend']; ?>", "end" : "<?php echo $row['timeend']; ?>",
<?php endif; ?> <?php endif; ?>
"polygon" : [ "point" :
{ {
"lat" : <?php echo $row['south']; ?>, "lat" : <?php echo ($row['south']+$row['north'])/2; ?>,
"lon" : <?php echo $row['west']; ?> "lon" : <?php echo ($row['west']+$row['east'])/2; ?>
},{ },
"lat" : <?php echo $row['north']; ?>, "title" : "<?php echo htmlspecialchars($row['title']); ?>",
"lon" : <?php echo $row['west']; ?> "options" : {
},{ // set the full HTML for the info window
"lat" : <?php echo $row['north']; ?>, "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>",
"lon" : <?php echo $row['east']; ?> "theme":"orange"
},{ }
"lat" : <?php echo $row['south']; ?>,
"lon" : <?php echo $row['east']; ?>
},{
"lat" : <?php echo $row['south']; ?>,
"lon" : <?php echo $row['west']; ?>
}
],
"title" : "<?php echo $row['title']; ?>",
"options" : {
// set the full HTML for the info window
"infoHtml": "<a href=/data/<?php echo $row['uuid']; ?>><?php echo $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']; ?>\"});' />"
}
}, },
<?php endforeach; ?> <?php endforeach; ?>
] ]
} }
} }
], ],
bandIntervals: [ bandIntervals: [
Timeline.DateTime.MONTH, Timeline.DateTime.MONTH,
Timeline.DateTime.DECADE Timeline.DateTime.DECADE
] ]
}); });
// manipulate the timemap further here if you like
} // set the map to our custom style
var gmap = tm.getNativeMap();
gmap.mapTypes.set("white", styledMapType);
gmap.setMapTypeId("white");
});
</script> </script>