mapbox点击列表图标变大

Posted 2023-03-22

mapbox点击列表图标变大的话，那是因为他这个列表的图标也就是可以让自己光看到这个图标的一个准确性，所以这个图标才会变大，也就是可以设置它可以把这个动态关闭，那么它这个图标就不会变大，因为它是动态化，所以图标才会变大。 参考技术A mapbox点击列表图标变大
我使用 react-native-mapBoxgl 使用 PointAnnotation 在我的地图上显示一些点。在 android 上一切正常，但在 ios 上，当我使用文本或图标或任何东西来显示点时，onSelected 方法不再起作用。所以我被迫使用默认标记。

为啥我的 Font-Awesome 图标在点击时会变大？

【中文标题】为啥我的 Font-Awesome 图标在点击时会变大？

【英文标题】：Why are my Font-Awesome Icons Increasing Size When Clicked?为什么我的 Font-Awesome 图标在点击时会变大？

【发布时间】：2022-01-03 18:04:28

【问题描述】：

我有 MDBootstrap 页脚，我已在 App.js 中将其制成 React 组件。我正在使用 Font-Awesome，当我单击图标时，它们的大小会不断增加。我不确定为什么？当它应该像我正在使用的这个页脚一样被圈起来时，它们也是一个圆形边缘（带有蓝色边框）：https://mdbootstrap.com/snippets/standard/mdbootstrap/2885115?view=side

这是我的 App.js：

   function App() 
  return (
    <div className="App">
      <ParticleBackground />
      <CenterTitle />
      <Footer />
      /* <FontAwesomeIcon icon=["fas", "ellipsis-v"]  opacity="0.1" color="green" size=["10x"] className="fa-icon img-fluid" max- /> */
    </div>
  );


function Footer() 
  return (
          // /* Remove the container if you want to extend the Footer to full width. */
          <div id="footer">
          <footer className="text-center text-lg-start" style=backgroundColor: '#000000'>
            <div className="container d-flex justify-content-center py-3">
              <a href="https://facebook.com">
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style=backgroundColor: '#54456b' >
                <i className="fab fa-facebook-f" />
              </button>
              </a>
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style=backgroundColor: '#54456b'>
                <i className="fab fa-youtube" />
              </button>
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style=backgroundColor: '#54456b'>
                <i className="fab fa-instagram" />
              </button>
              <button type="button" className="btn btn-primary btn-lg btn-floating mx-2" style=backgroundColor: '#54456b'>
                <i className="fab fa-twitter" />
              </button>
            </div>
            /* Copyright */
            <div className="text-center text-white p-3" style=backgroundColor: 'rgba(0, 0, 0, 0.2)'>
              © 2021 Copyright:
              <a className="text-white" href=""> Pioneer TM</a>
            </div>
            /* Copyright */
          </footer>
        </div>
        // /* End of .container */
  );
      

export default App;

这是我的 App.css：

#footer 
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;   /* Height of the footer */
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  /* background:#6cf; */

以下是正在发生的事情的图片：

【参考方案1】：

我试图在沙盒上复制您的错误，但上面提到的代码似乎没有错误。

https://codesandbox.io/s/relaxed-field-jps5x?file=/src/App.js

对于圆形按钮，您似乎使用了 bootstrap 而不是 MDBootstrap 5。

【讨论】：

感谢您的回复。我也安装了引导程序，我对如何将链接添加到头部的 CSS 有点困惑。我找到了它正在使用的这个：use.fontawesome.com/releases/v5.13.0/css/all.css">

@Miller42 请从沙盒中查看公用文件夹的 index.html 文件。或者，使用下面的代码``` cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/…" rel="stylesheet" /> cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.10.0/mdb.min.css " rel="stylesheet"/> ```

【参考方案2】：

试试这个。

#footer 
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  left: 0;