我目前正在开展的一个项目需要实施带有多个标记和多个信息框的谷歌地图.引用地图API这似乎是一个很好的起点:
https://developers.google.com/maps/documentation/javascript/examples/icon-complex
所以我使用这个代码作为基础,并从那里建立.现在,我坚持使用的是为每个标记添加一个独特的信息框.这是我的来源
http://jsfiddle.net/jackthedev/asK5v/1/
你可以看到我试图调用第一个元素,其中选择了数组中的任何对象,它完全适用于lat,long和title,而不是contentstring变量.
for (var i = 0; i < locations.length; i++) {
var office = locations[i];
var myLatLng = new google.maps.LatLng(office[1], office[2]); //works here
var infowindow = new google.maps.InfoWindow({content: contentString});
var contentString =
'<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">'+ office[0] + '</h1>'+ //doesnt work here
'<div id="bodyContent">'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({content: contentString});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: globalPin,
title: office[0], //works here
});
google.maps.event.addListener(marker, 'click', function() { …Run Code Online (Sandbox Code Playgroud) 有没有办法以人类可读的格式显示created_at和updated_at时间戳,如果它们在数据透视表中使用?
我是整个数据透视表laravel的新手,但是现在我使用数据透视表来存储用户对各个帖子的评论,每个帖子都有created_at和updated_at时间戳.
如果我只是使用带有模型的普通表,我会扩展我的基本模型,如下所示:
use Carbon\Carbon;
class Base extends Eloquent {
protected function getHumanTimestampAttribute($column)
{
if ($this->attributes[$column])
{
return Carbon::parse($this->attributes[$column])->diffForHumans();
}
return null;
}
public function getHumanCreatedAtAttribute()
{
return $this->getHumanTimestampAttribute("created_at");
}
public function getHumanUpdatedAtAttribute()
{
return $this->getHumanTimestampAttribute("updated_at");
}
}
Run Code Online (Sandbox Code Playgroud)
但是,由于我不使用数据透视表的模型,我将如何解决这个问题?有没有办法让这些功能与我的数据透视表一起使用?使用数据透视表的模型是最简单/正确的方法吗?
编辑 这就是我的关系看起来像是放在我的用户模型中.
/**
* Guide comments
*
* @return mixed
*/
public function guide_comments()
{
return $this->belongsToMany('Guide', 'guides_comment')->withTimestamps();
}
Run Code Online (Sandbox Code Playgroud) 我试图对齐基础5开头的标签.由于某些原因,默认情况下它们与左边对齐,我无法弄清楚如何让这些与屏幕中心对齐.我正在使用的代码非常简单(沼泽标准选项卡标记)
例:
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
<li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
现场演示:
所以我的目标是两个标签在屏幕中间居中而不是向左可以这样做吗?
目前有一个问题,即将悬停CSS3或jQuery过渡添加到带有背景图像的div.我希望背景图像在悬停时淡入背景色.
背景颜色悬停的简单背景图像的基本示例
.div1 {
background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
background-size:cover;
height:200px;
width:600px;
}
.div1:hover {
background:red;
}
Run Code Online (Sandbox Code Playgroud)
现在这可以达到您的预期,但我怎样才能使背景图像淡入背景色?
我试图向悬停添加一个简单的CSS3过渡但这不起作用,如此jsFiddle所示.
有没有办法将背景延伸到网格的左侧或右侧?例如,如果我想做一个带有网格的 100% 背景,我会做类似的事情:
<div class="100%BACKGROUND">
<div class="row>
<div class="large-12 columns>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
哪个工作得很好,但是如果我想将网格外的背景颜色扩展到页面的一侧,我的意思是例如
<div class="row>
<div class="large-8 columns">
</div>
<div class="BACKGROUNDSTART"> <-- background start
<div class="large-4 columns">
</div>
</div>
</div> <-- background end
Run Code Online (Sandbox Code Playgroud)
现在这显然不起作用,但这是我试图实现的那种东西,它是一个看起来如何的模型。
