有没有人能够使用React渲染谷歌地图而不使用react-google-map插件?我正在尝试这样的事情:
var MapTab = React.createClass({
render: function() {
return <div className="map-container">
<div id='map' ></div>
</div>
},
componentDidMount: function(){
console.log("Hello")
window.onload = function(){
(function initMap() {
var markers = [];
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: {lat: 37.7749300, lng: -122.4194200}
});
})();
}
}// end of cdm;
});
module.exports = MapTab;
Run Code Online (Sandbox Code Playgroud)
我没有尝试过任何工作.我也尝试使用refs捕获地图,但也没有渲染地图.我已经将google地图脚本放在标题中(使用键),并验证了密钥在vanilla js项目中是有效的.
我试图准确地了解在 DOM 操作后使用常规 DOM 更新了什么。
假设我们有下面的 DOM,我使用 javascript 删除类 blue 的 li。
这是否意味着浏览器查看 blue 类的父级(例如:列表 1 的 id)并重新渲染该 DOM 节点,包括所有子级(减去 blue 类),然后根据任何 css 规则重新绘制整个页面?
我认为这就是过程,但我不确定,也找不到任何具体的例子。
<div>
<ul id="list1">
<li> red </li>
<li class="blue"> blue </li>
<li> green </li>
</ul>
<ul id="list2">
<li> orange </li>
<li> gray </li>
<li> brown </li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud) 现在我通过传递一个bounds参数来设置我的反应传单映射的边界,如下所示:
<div hidden={!this.props.hide && !this.props.toggle} className="map-container">
<Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >
<Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
{ this.geoResults().map(this.renderMarker) }
</Leaflet.Map>
</div>
Run Code Online (Sandbox Code Playgroud)
问题是有时标记会在地图的最外面部分(在视图中)呈现,因此除非我拖动地图或缩小一个点,否则标记甚至不可见.我试图用缓冲区修复此问题或尝试绘制边界然后使用缩放来缩小一次,但似乎没有任何效果.你们有什么想法吗?
我是Rspec的新手,我正在尝试在我的应用程序中测试一条路线.我已经安装了Rspec并且已经包含了路由文件spec/routing/routes_spec.rb.
我的规格如下:
require "spec_helper"
describe "Routes" do
it "routes get index" do
expect(:get => "simulations").to route_to(
:controller => "simulations",
:action => "index"
)
end
end
Run Code Online (Sandbox Code Playgroud)
我收到此错误:
Routes routes get index
Failure/Error: expect(:get => "simulations").to route_to(
NoMethodError:
undefined method `route_to' for #<RSpec::ExampleGroups::Routes:0x007fc32d2f70b8 @__memoized=nil>
# ./spec/routing/routes_spec.rb:6:in `block (2 levels) in <top (required)>'
Run Code Online (Sandbox Code Playgroud)
关于为什么route_to不明确的任何想法?我已经确认路线确实有效.
我很好奇我的媒体查询出了什么问题。我只想要一种用于“相当小屏幕”的样式和一种用于“相当大屏幕”的样式。所以我做了以下事情:
@media (min-width: 501px) {
#courtName {
font-size: 17px;
}
#courtInfoWindow {
font-size: 13px;
}
}
@media (max-width:500px) {
#courtName {
font-size: 64px;
}
#courtInfoWindow {
font-size: 40px;
}
}
Run Code Online (Sandbox Code Playgroud)
我希望最小宽度尺寸显示在“大屏幕”上,最大宽度尺寸显示在小屏幕上(小于 500 像素)。然而,较小的尺寸显示在所有屏幕尺寸上。我尝试仅使用一个媒体查询来覆盖默认大小。尝试切换顺序。什么都不起作用。是什么赋予了?
我正在尝试从api响应中创建动态html.每当我得到一个双字的类名时,我就无法保存这两个单词,因为当它看到空格时字符串结束.见下文:
for(var i = 0; i<articles.posts.length; i++){
var cls = 'fa '+articles.posts[i].category;
var el = "<article><i class="+cls+"></i><h2> From the Archive </h2><h1> " + articles.posts[i].title + "</h1><h3> " + articles.posts[i].date + " </h3><p> " + articles.posts[i].blurb + "</p></article>"
$("#article-list").last().append(el);
}
Run Code Online (Sandbox Code Playgroud)
对于实例,如果'cls'是fa-space-shuttle,则该类被设置为'fa'而不是'fa fa-space-shuttle'.知道如何使用javascript解决这个问题吗?