个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我在 RoR 中有一个网站。
我使用 gmaps4rails gem 调用 Google map 。
我想去除信息窗口的背景div，但我不知道该怎么做。
@编辑1
我的 index.html.erb 中有这段代码
<body>
<%# Mapa para mostrar todos os pontos guardados na base de dados %>
<div id="map_show" class="" style=""></div>
<script type="text/javascript">
var InfoBoxBuilder, handler,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
InfoBoxBuilder = (function(superClass) {
extend(InfoBoxBuilder, superClass);
function InfoBoxBuilder() {
return InfoBoxBuilder.__super__.constructor.apply(this, arguments);
}
InfoBoxBuilder.prototype.create_infowindow = function() {
var boxText;
if (!_.isString(this.args.infowindow)) {
return null;
}
boxText = document.createElement("div");
boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens
boxText.innerHTML = this.args.infowindow;
return this.infowindow = new InfoBox(this.infobox(boxText));
};
InfoBoxBuilder.prototype.infobox = function(boxText) {
return {
content: boxText,
pixelOffset: new google.maps.Size(-140, 0),
boxStyle: {
width: "280px"
}
};
};
return InfoBoxBuilder;
})(Gmaps.Google.Builders.Marker);
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map_show'}}, function() {
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
</body>
但是输出是这样的:
我做错了什么？
@EDIT2
在我的部分 _infowindow.html.erb 中，我有这段代码可以为我提供纪念碑的信息，并且该信息将用于标记。
<div class="card" style="">
<%= image_tag poi.image, :class => "card-img-top cover" %>
<div class="card-block">
<h4 class="card-title"><%= poi.name %></h4>
<p class="card-text"><%= simple_format(poi.description.first(400)) %></p>
</div>
</div>
我可以把它放在哪里？我不知道把代码放在哪里。
@EDIT3
我使用此代码在 Controller 中呈现局部:
marker.infowindow render_to_string(:partial => "/home/infowindow", :locals => { :poi => poi})
但信息窗口仍然像第一张图片
最佳答案
我仍在学习，但基本上您需要能够定位信息窗口 div。当您使用 gmaps4rails 创建一个信息窗口时，它会在主 div 中创建一个 div，因此您只需要自定义内部 div。您需要多一点代码来定位主 div。我曾经使用以下代码来完成此操作:
var InfoBoxBuilder, handler,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
InfoBoxBuilder = (function(superClass) {
extend(InfoBoxBuilder, superClass);
function InfoBoxBuilder() {
return InfoBoxBuilder.__super__.constructor.apply(this, arguments);
}
InfoBoxBuilder.prototype.create_infowindow = function() {
var boxText;
if (!_.isString(this.args.infowindow)) {
return null;
}
boxText = document.createElement("Div");
boxText.setAttribute('class', 'yourClass');
boxText.innerHTML = this.args.infowindow;
return this.infowindow = new InfoBox(this.infobox(boxText));
};
InfoBoxBuilder.prototype.infobox = function(boxText) {
return {
content: boxText,
pixelOffset: new google.maps.Size(-140, 0),
boxStyle: {
width: "280px"
}
};
};
return InfoBoxBuilder;
})(Gmaps.Google.Builders.Marker);
这将允许您定位主 div 来改变窗口的整体外观。让我知道这是否适合您，或者您是否需要更多指导也可以发布您的代码。
这是我告诉您的更新后的代码部分。
<!-- Custom info markers -->
<div id="map_show" class="" style=""></div>
<script type="text/javascript">
var InfoBoxBuilder, handler,
extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
hasProp = {}.hasOwnProperty;
InfoBoxBuilder = (function(superClass) {
extend(InfoBoxBuilder, superClass);
function InfoBoxBuilder() {
return InfoBoxBuilder.__super__.constructor.apply(this, arguments);
}
InfoBoxBuilder.prototype.create_infowindow = function() {
var boxText;
if (!_.isString(this.args.infowindow)) {
return null;
}
boxText = document.createElement("div");
boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens
boxText.innerHTML = this.args.infowindow;
return this.infowindow = new InfoBox(this.infobox(boxText));
};
InfoBoxBuilder.prototype.infobox = function(boxText) {
return {
content: boxText,
pixelOffset: new google.maps.Size(-140, 0),
boxStyle: {
width: "280px"
}
};
};
return InfoBoxBuilder;
})(Gmaps.Google.Builders.Marker);
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map_show'}}, function() {
markers = handler.addMarkers(<%=raw @hash.to_json %>);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
});
</script>
我更新了我的答案以适合您的答案。您需要创建一个类，它在本节中显示您的类，并根据您的喜好设置样式。
boxText = document.createElement("div");
boxText.setAttribute('class', 'yourClass'); // This is where you add a class style it in your css and see what happens
关于ruby-on-rails - RoR gem Gmaps4rails，自定义信息窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44998241/
25
4
0
我在使用 JSF2.0 的 Primefaces 3.5 的 Gmap 组件的项目上遇到问题。我有这个命令按钮，可以对标记进行过滤和最重要的更新 mapForm map 形式:
我使用的是 Gmap.NET 的 WinForm 版本。我正在做的是为每个标记创建 1 个叠加层，然后将其添加到我的 map 控件中。这显着减少了我程序中的延迟。现在唯一的问题是，如果我想隐藏一个覆盖
我正在尝试创建一个应用程序位置，但它向我显示错误 gmaps (com.formation.gmaps) 的应用程序已意外停止。 请注意，我已经卸载了eclipse，但总是出现此错误。 这是我的错误日
我在使用 angular-google-maps 时遇到问题。我只想将基本的信息窗口附加到 map 上的每个标记。我正在使用 ui-gmap-markers 并在每个标记指令内放置一个 ui-gmap
自定义Marker，可以理解为在地图上自定义图标（Custom Marker），先看看GMap的地图和图标的显示方式： Map控件上可以添加Overlay（图层），可以添加多个图层，先添加的图
我正在尝试制作一个能够显示 map 的小应用程序。我遇到了 GMap.Net，它非常适合我的目的，除了 map 没有完全显示在控件中。我附上了一张图片，希望你能理解我的问题。 我的加载按钮代码是 pr
我想使用 GMap.Net 的路线方法绘制路线。但是，当我用新颜色将任何点添加到路线列表中时，所有路线的颜色都发生了变化。因此，一条路线似乎只能使用一种颜色。有没有办法在一条 route 使用两种或多
我打算使用GMap.Net设计Windows窗体应用程序，以查看供个人使用的离线地图。我已经有一些mapdata，可以使用通用映射downloader下载，可以将其转换为sqlite db格式。但是G
我在我的 Windows 应用程序 (C#) GMAP API 中使用，我需要显示 map 的地形特征，因此，我尝试按如下方式分配 map 的提供者: Map.MapProvider = GMapP
我需要处理 map 上的每个标记，所以我想要的是这样的: var marker[5] = new google.maps.Marker({ position: new google.maps.La
我正在尝试实现此功能( GMap - Info Window)在我的网站上。 标记有效，但信息窗口从未显示。我尝试在 applicationContext.xml 中为 InfoWindowView.
我可以在悬停时更改标记大小吗？我需要在悬停时增加标记大小 (2-3 px) 并在鼠标移开时减小到默认大小。 最佳答案 如果您使用自定义图标，您可以轻松地在鼠标悬停时更改图像: [...] var ma
IsMouseOverMarker 属性检测点击标记就好了，但是当尝试使用 GMap 控件的 IsMouseOverPolygon 属性检测用户是否点击多边形时行 - 它似乎不起作用。 注意:GMap
我正在使用 gmap.net 控件在 Windows 窗体上显示 map 。到目前为止，除了 map 拖动功能外，一切正常。一般来说，左鼠标按钮支持 map 拖动，但在 gmap.net 控件中鼠标右
我正在尝试从该位置输出路线时间，由于某种原因该路线从未经过。 jQuery(document).ready(function () { $.get('api/index.php', funct
我有一个关于 jQuery Google map 代码的简单问题。 我已向 map 添加了标记，但信息窗口在开始时不会显示，仅在鼠标悬停后才显示。 这是代码: (function ($) { var
我正在尝试创建一个位置输入字段，用户将在其中选择一个位置。因此 map 上应该只存在一个标记。 我当前的代码在点击时添加了一个标记: var map = new GMaps({
我正在使用 gmaps.js，我可以使用此代码绘制多边形 var paths = []; function drawPoly(p1, p2) { paths.push([p1, p2]); c
当我拖动标记时，是否可以禁用 google mal (v3) 内部的移动？我不想使用静态 map 。我需要一般的移动功能，但是当我拖动标记时， map 不应该移动。 非常感谢! 最佳答案 标记有 dr
我们在创建多边形时遇到问题，因为它们没有出现在 map 上。我们按照本教程来实现我们的解决方案: http://googlemaps.subgurim.net/ejemplos/ejemplo_941
我是一名优秀的程序员,十分优秀！