修改bootstrap和google map的样式冲突
This commit is contained in:
Li Jianxuan
parent
af8fa13c61
commit
70a237d338
|
|
@ -3,104 +3,103 @@ $this->headTitle($this->config->title->site);
|
|||
$this->headTitle($this->config->title->data);
|
||||
$this->headTitle('时空导航');
|
||||
$this->headTitle()->setSeparator(' - ');
|
||||
$this->headLink()->appendStylesheet('/css/metadata.css');
|
||||
//$this->headLink()->appendStylesheet('/css/metadata.css');
|
||||
$this->breadcrumb('<a href="/">首页</a>');
|
||||
$this->breadcrumb('<a href="/data">'.$this->config->title->data.'</a>');
|
||||
$this->breadcrumb('<a href="/data/timeline">时空导航</a>');
|
||||
$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/api/js?sensor=false');
|
||||
$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/jquery-1.7.min.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->headScript()->appendFile('/js/jquery.colorbox-min.js');
|
||||
$this->headLink()->appendStylesheet('/css/colorbox.css');
|
||||
?>
|
||||
<style>
|
||||
img{max-width:none}
|
||||
</style>
|
||||
<div class="row-fluid"><?= $this->partial('data/tools.phtml'); ?></div>
|
||||
<div id="timemap">
|
||||
<div id="map" style="height:500px;width:50%;float:right;"></div>
|
||||
<div id="timeline" style="height:500px;border-right:1px solid #abc;"></div>
|
||||
|
||||
<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>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$('#map').height($(window).height());
|
||||
$('#timeline').height($(window).height());
|
||||
|
||||
<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)
|
||||
options: {
|
||||
eventIconPath: "../images/"
|
||||
},
|
||||
datasets: [
|
||||
{
|
||||
id: "artists",
|
||||
title: "Artists",
|
||||
theme: "orange",
|
||||
// note that the lines below are now the preferred syntax
|
||||
type: "basic",
|
||||
options: {
|
||||
items: [
|
||||
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)
|
||||
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" : {
|
||||
// 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']; ?> onclick='$.colorbox({photo:\"true\",href:\"/service/bigthumb/id/<?php echo $row['id']; ?>\"});' /></div>",
|
||||
"theme":"orange"
|
||||
}
|
||||
{
|
||||
"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=/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"
|
||||
}
|
||||
},
|
||||
<?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");
|
||||
<?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>
|
||||
Loading…
Reference in New Issue