27
4
I'm using mapbox api for my application where user can add markers based on his current location. The map was loading just fine while it was running on localhost but after hosting it in netlify, all other components are loading but not the map. Even the markers on the map are showing but the map isn't showing up. This is my App link. There are some errors on the console. But I'm not sure what is causing this behavior. I saw a similar question before, but those solution didn't work for me. I even created a new api key, there were no URL restrictions. So any suggestions would be appreciated.
我正在为我的应用程序使用mapboxapi，用户可以根据当前位置添加标记。映射在localhost上运行时加载得很好，但在netlify中托管后，所有其他组件都在加载，但没有加载映射。甚至地图上的标记也在显示，但地图没有显示。这是我的应用程序链接。控制台上有一些错误。但我不确定是什么导致了这种行为。我以前也看到过类似的问题，但这些解决方案对我不起作用。我甚至创建了一个新的api密钥，没有URL限制。因此，任何建议都将不胜感激。
个人中心
文章发布
退出<ReactMapGL
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX}
{...viewport}
onViewportChange={(nextViewport) => setViewport(nextViewport)}
mapStyle={process.env.REACT_APP_MAP_STYLE}
onDblClick={handleAddPlace}
transitionDuration={200}
>
{pins.map((pin, idx) => (
<div key={idx}>
<Marker
latitude={pin.lat}
longitude={pin.long}
offsetLeft={-viewport.zoom * 3.5}
offsetTop={-viewport.zoom * 7}
onClick={() => handlePinClick(pin._id, pin.lat, pin.long)}
>
<FaMapMarkerAlt
style={{
fontSize: viewport.zoom * 7,
color: pin.username === currentUser ? "#ff0984" : "#4f56a5",
cursor: "pointer",
}}
/>
</Marker>
...
</ReactMapGL>
Did you ever find a resolution to this? I am having this exact issue. Everything seems to work with no errors but no base map. Everything works perfect on my local environment but when I move it to Google hosting the base map is absent. Plotted points show up, no errors in console or network tab in debugger.
你找到解决这个问题的办法了吗？我有这个问题。一切似乎都正常工作，没有错误，但没有基本地图。在我的本地环境中，一切都很完美，但当我把它移到谷歌托管时，基本地图就不存在了。打印的点显示出来，在控制台或调试器的网络选项卡中没有错误。
@pachyderm94 No I didn't. I even contacted their customer support but no luck...Let me know if you find any solution.
@厚皮动物94不，我没有。我甚至联系了他们的客户支持，但没有运气。。。如果你找到任何解决方案，请告诉我。
If you follow the link given in the error message Mapbox does offer up three ways to fix the issue. I ended up using the browser white list option and our maps are now showing up.
如果你按照错误消息中给出的链接，Mapbox确实提供了三种方法来解决这个问题。我最终使用了浏览器白名单选项，我们的地图现在显示出来了。
@pachyderm94 how did you whitelisted the browsers? through package.json? could you share what did you do?
@pachyderm94你是如何将浏览器列入白名单的？通过package.json？你能分享一下你做了什么吗？
Yes in the package.json I added the following:
在package.json中，我添加了以下内容：
"browserslist": {
"production": [
">0.2%",
"not dead",
"not ie 11",
"not chrome < 51",
"not safari < 10",
"not android < 51",
"not op_mini all"
],
The "browserlist" attribute was already there I just augmented it to include more and that fixed the issue for me. The mapbox page is not super clear on how to implement the recommended fixes within a react app, so you have to do some translation of their suggestions. I hope this works for you as well.
“browserlist”属性已经存在，我只是增加了它以包含更多内容，这为我解决了这个问题。地图框页面不太清楚如何在react应用程序中实现推荐的修复，所以你必须对他们的建议进行一些翻译。我希望这对你也有用。
Sorry should have been added as a comment not an answer. Read comments below original question to follow.
抱歉应该添加为评论而不是回答。阅读原问题下面的评论。
i had these browser lists from the beginning. here's what mine looks like ` "browserslist": { "production": [ ">0.25%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }`
我从一开始就有这些浏览器列表。以下是我的浏览器列表：｛“production”：[“>0.25%”，“not dead”，“not op_mini all”]，“development”：[最后1个chrome版本，“最后1个firefox版本”，“最后一个safari版本”]}`
Correct. As I said in my earlier comment. The attribute is there already but you need to change it to include the entire list. That fixed it for me. Since it only happens when I published up to Google Cloud I only updated the "production" list.
对的正如我在前面的评论中所说。该属性已经存在，但您需要更改它以包括整个列表。这对我来说已经解决了。因为只有当我发布到谷歌云时才会发生这种情况，所以我只更新了“生产”列表。
This magically work for some reason :o
这神奇地起作用是有原因的：o
27
4
0
我有一个扩展程序，我已经拆掉了裸机，它使自己处于不正确的状态，当它折叠时它会说“显示更少”。 这有两种情况 我使用“显示更多”展开扩展，然后离开屏幕。我打开另一个应用程序，然后返回到扩展程序。扩展的扩
为什么这些不相等？ show $ if someCondition then someInt else some double 和 if someCondition then show someInt
下面给出的代码可以编译，ok。 data Car p q r = Car {company :: p , model :: q
是否可以在表结构中的“显示 0 到 0 个条目中的 0 个条目”旁边显示“显示条目”下拉列表。我想在底部显示“显示条目”下拉列表以及分页并显示 0 到 0 个条目，共 0 个条目。 提前致谢!!! 图
我不明白当你这样做一连串 .show() 时会发生什么。我也没有编写这段代码，也不知道如何弄清楚这里发生了什么。因此就有了这个问题。 // Remove favorite category
$(document).ready(function(){ $('html').addClass('js'); var contactForm = {
因此，在实现上一个问题的 jQuery 代码后，我注意到以下内容，每当人们添加位于显示较少/显示更多菜单中的产品时，系统会刷新页面，因为它会重新计算价格，因此也会刷新页面。但是当发生这种情况时，菜单会
我已经在 Windows 上设置了 mongodb 64bits。我成功运行了服务器和客户端。 但是当我输入时: show dbs 输出是 local 0.000GB 为什么？ show dbs 应
正如标题所说，我有兴趣使用 Show a在我有 Show (a,b) 的情况下. GADT 很容易出现这个问题，如下所示: data PairOrNot a where Pair :: (b,c)
通常 julia> Base.show(io::IO, a::Int) = print(io, "xx") show (generic function with 98 methods) julia>
通常 julia> Base.show(io::IO, a::Int) = print(io, "xx") show (generic function with 98 methods) julia>
我找不到关于 Readline 选项 show-all-if-ambiguous 和 show-all-if-unmodified 之间区别的明确解释，以及是否它们影响不同的事物或相互排斥。关于这个主
我是 BeautifulSoup 的新手，我遇到了一些我不明白的问题，我认为这个问题可能尚未得到解答，但在这种情况下，我找到的答案都没有帮助我。 我需要访问 div 的内部以检索网站的词汇表条目，但是
我已经为 iOS 10 实现了新的小部件，并使用以下代码为其设置高度: @available(iOSApplicationExtension 10.0, *) func widgetActiveDis
克隆远程 git 存储库并发出 git show --show-signature 后，它说签名是好的。然后我更改了一些文件并测试了相同的命令，它仍然说签名是好的。 上面的命令到底检查了什么？验证克隆
我陷入了这个问题，而且我对 Haskell 很陌生，我试图用以下代码完成第一个欧拉问题: main = putStrLn . show . sum $ [3,6..1000]:[5,10..1000]
我有一个独立的 Android 和 iOS 应用程序。 目前正在 Android 上测试推送通知。 我已经使用以下通知键设置了我的 app.json "notification":{ "i
我所说的示例:http://jsfiddle.net/bsnxp/1/ 如果你检查源 .show().clone() display 是 inline-block (它应该是什么)并且 .clone(
我正在使用下面的 jQuery 代码来显示/隐藏网页上的额外文本 jQuery.fn.shorten = function(settings) { var config = { showC
我有一个带有 ng-show 的 div。这个 div 是我创建的自定义指令的包装器。 HTML JS function myDirective() { function doS
我是一名优秀的程序员,十分优秀！