React Native 地图:在react-native-maps 中使用自定义标记时,标记图像不显示

2024-03-04

我在用着react-native-maps但我遇到了一个问题,经过大量谷歌搜索后没有答案让我在这里问它。 我正在尝试使用自定义标记作为地图中的标记,如下图所示

  • 当我搜索时我发现需要使用自定义标记来完成创客的设计,然后我创建了一个自定义标记组件

    import React, { Component } from "react";
    import { View } from "react-native";
    import {
    Text,
    Left,
    Right,
    Thumbnail,
    } from "native-base";
    const defaultEmployeeLogo = require("../../../assets/defualtEmployee.png");
    class CustomMarker extends Component {
    render() {
        return (
        <View style={{ flexDirection: 'row', width: 140, height: 60, 
          borderRadius: 70, backgroundColor: 'orange' }}>
            <Left>
                <Thumbnail source={defaultEmployeeLogo} />
            </Left>
            <Right>
                <Text style={{
                    color: '#fef',
                    fontSize: 13,
                    paddingBottom: 2,
                    fontFamily: 'Roboto',
                    alignItems: 'center',
                    paddingRight: 10
                }}>Mohammad</Text>
            </Right></View >);
       }
    }
    export default CustomMarker;
    

当我单独使用 CustomMarker.js 类时,它工作正常并且显示图像,但是当我将它用作标记自定义视图时,它不显示图像

我不知道为什么它不能在android中使用自定义标记渲染图像。 这是我使用地图、标记和自定义标记类的代码

return (
  <View style={styles.map_container}>
    <MapView
      style={styles.map}
      customMapStyle={customrMapStyle}
      region={{
        latitude: this.state.region.latitude,
        longitude: this.state.region.longitude,
        latitudeDelta: 0.4,
        longitudeDelta: 0.41,
      }} >
      {
        coordinationData.map(function (marker, i) {

          let lat = marker.latLang.latitude;
          let lang = marker.latLang.longitude;
           <MapView.Marker
            key={i}
            coordinate={
              {
                latitude: lat,
                longitude: lang,
                latitudeDelta: 0.4,
                longitudeDelta: 0.41
              }
            }
            title={marker.title}
            description={marker.description}

          >
            <CustomMarker />
          </MapView.Marker>
        })}
    </MapView>
  </View>

任何形式的帮助将不胜感激。


Use SVG为了这https://github.com/react-native-community/react-native-svg https://github.com/react-native-community/react-native-svg

<Marker
    coordinate={{
        longitude: lang,
        latitude: lat,
    }}
>
    <View style={{
        flexDirection: 'row', width: 100, height: 30,
        backgroundColor: 'orange'
    }}>
        <Svg
            width={40} height={30}>
            <Image
                href={url}
                width={40}
                height={30}
            />
        </Svg>
        <View
            style={{
                flexDirection: 'column'

            }}
        >
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.title}</Text>
            <Text
                style={{
                    marginLeft: 2,
                    fontSize: 9,
                    color: '#ffffff',
                    fontWeight: 'bold',
                    textDecorationLine: 'underline'
                }}
            >{marker.description}</Text>
        </View>
    </View>
</Marker>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native 地图:在react-native-maps 中使用自定义标记时,标记图像不显示 的相关文章

  • Android中如何使用洪水填充算法?

    我是Android编程新手 最近尝试编写一个简单的应用程序 仅供练习 在这个中 我想在用户点击时为图像着色 但我不知道如何开始 我读过不同的主题 其中提到使用 洪水填充 算法 我在网上找到了它 但我不知道如何将它放入我的简单应用程序中 我找
  • 如何在出现“无法解析放置符号”错误时向哈希图添加键和值

    我正在与安卓工作室 https en wikipedia org wiki Android Studio1 4 1 我刚刚创建了一个 Hashmap 并正在遵循有关如何填充和操作它的教程 Java 语言 但是 我收到 无法解析符号放置 错误
  • 检索子值 -firebase-

    System out println ref child email protected cdn cgi l email protection child email 我正在尝试获取 child 的值 但我始终获取该值的 URL 当我尝试使
  • 如何重新定位或移动 Google Maps SDK 上的当前位置按钮?

    如何将 Objective C 中的当前位置按钮移至我的偏好 现在 我已启用它 但底角有东西挡住了它 Thanks 您可以使用 padding 将按钮向上移动 self mapView padding UIEdgeInsets top 0
  • Android Studio - 错误:未捕获翻译错误:com.android.dx.cf.code.SimException:本地 0001:无效

    我刚刚使用 Android Studio 设置了一台新计算机 并从 bitbucket 导入了我的项目 问题是我现在在尝试构建项目时遇到此错误 信息 Gradle 任务 app clean app generateDebugSources
  • 如何使用 adb 在设备上安装现有的 Android 应用程序?

    在开发过程中 我使用类似的东西 adb s 192 168 1 77 5555 uninstall com myApp app adb s 192 168 1 77 5555 install path to android debug ap
  • SQLite (Android):使用 ORDER BY 更新查询

    Android SQLite 我想要在 myTable 中的其他行之间插入行在android中使用SQLite 为此 我尝试增加从第 3 行开始的所有行的 id 这样 我就可以在位置 3 处插入新行 myTable 的主键是列 id 表中没
  • android 确定设备是否采用从右到左的语言/布局

    有没有办法确定设备是否使用从右到左的语言 例如阿拉伯语 而不是从左到右的语言 英语 与较旧的 API 级别 低至 10 兼容的东西是必要的 SOLUTION 我最终在接受的答案中使用了 xml 方法 接下来 我还添加了此处指示的代码 以应对
  • Android GCM 服务器的 API 密钥

    我有点困惑我应该为 GCM 服务器使用哪个 API 密钥 在文档中它说使用 android api 密钥 这对我不起作用并且总是给出未经授权的 http developer android com google gcm gs html ht
  • Android模拟器分配内存失败8

    当我尝试从 Eclipse 运行 WXGA800 模拟器时 出现如下错误 Failed to allocate memory 8 This application has requested the Runtime to terminate
  • 在 AppAuth-Android 中注销

    我有一个用JAVA开发的Android应用程序 对于这个应用程序 我使用的是身份服务器4 https github com IdentityServer IdentityServer4作为我的 STS 一切正常 但我找不到任何注销的实现Ap
  • 通过列表视图检查动态生成的复选框时遇到问题

    我知道其他成员已经提出了这个问题 一些成员也给出了解决方案 但问题是我没有找到任何适合我的应用程序的解决方案 我正在创建一个应用程序 其中我有一个屏幕 它将显示动态列表视图 其中包含列表项 复选框和三个文本视图 一个用于候选人姓名 另外两个
  • jar 中的 apklib 有什么优点?

    我正在关注这个问题 https stackoverflow com questions 6059502 whats the difference between apklib and jar files但它并没有完全回答我的问题 jar 中
  • 从手机访问本地主机[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 我正在使用
  • 如何在Android Compose中使用otf类型字体文件?

    我正在学习使用 Android Jetpack Compose 现在我有一个正则 otf字体文件在资产 字体 我想在文本中使用它 java lang RuntimeException Font asset not found commonu
  • 使用嵌套的 hashmap 参数发送 volley 请求

    我正在使用 android volley 框架向我的服务器发送 jsonobject 请求 get 请求工作正常 现在我想发送一个带有请求参数的 post 请求 该请求参数是嵌套的 hashmap 我重写 getparams 方法 但它期望
  • Android:打开和关闭SQLite数据库

    我正在开发Android应用程序 我经常在其中访问本地数据库 该数据库可以从不同的主题访问 因此我遇到了数据库的协调问题 我使用以下open and close method public void open mDb mDbHelper g
  • 当应用程序未运行时,如何在 React Native 应用程序中读取传入的短信?

    有几个可用的 ReactNative 短信插件 但大多数在应用程序位于前台时读取短信 当应用程序甚至没有运行时 我如何读取短信 就像本机短信阅读器应用程序一样 我不知道有任何可用的库 但你可以这样做 创建一个BackgroundScanSe
  • “无法实例化活动”错误

    我的一个 Android 应用程序拥有大约 100 000 个用户 每周大约 10 次 我会通过 Google 的市场工具向我报告以下异常情况 java lang RuntimeException Unable to instantiate
  • 通过powershell运行ADB命令

    所以我尝试通过 powershell 脚本运行一些 ADB 命令 这是我正在尝试做的一个简单示例 adb shell echo in adb shell su root echo you are now root ls cd data da

随机推荐

  • 读取单选按钮值 - Angular 2

    我正在尝试读取单选按钮值 以角度 2 表示 索引 html
  • 忽略连接字符串中的连接超时属性

    我正在用 C 构建一个应用程序 我使用的连接字符串如下 DSN SomeDataSource Trusted Connection yes Uid SomeId pwd somePwd Connection Timeout x 但无论我设置
  • Python - 使用选择器的非阻塞套接字

    我的问题简而言之 我不知道选择器如何知道哪个套接字应该首先读取或写入 它是一个可以处理多连接的服务器 其流程应该是 服务器创建监听套接字 客户端创建2个套接字并将它们连接到服务器 客户端2套接字发送消息 服务器 2 套接字回显这些消息 客户
  • 将 .NET Framework 3.5 迁移到 4.5 时出错

    我们正在将 Web 应用程序从 NET Framework 3 5 迁移到 4 5 在我们的开发机器上 我们使用 VS2012 并运行 Windows 7 操作系统 在这个过程中我们得到了如下错误 基类包含字段 htmlTag 但其类型 S
  • 让 jquery ajaxStop 每次只触发一次

    由于某种原因 我的 ajaxStop 代码现在触发了两次 我需要将其限制为一次 submit bind click function e fileupload ajaxForm target status submit document a
  • 是否可以使用 ggplot 在地图上覆盖散点图?

    我想画一张法国省份 即法国的地区 的地图以及地图上的标绘点 我使用 ggplot2 绘制地图 但是当我想在地图上添加点时 R 返回一个错误 指出它找不到 组 library ggplot2 library ggmap load the co
  • 实体框架未将更改保存到数据库中

    我很困惑为什么这段代码不起作用 它应该在循环后保存对数据库的更改 但是当我放置SaveChanges循环内的方法 它将记录保存到数据库中 但在循环外不保存任何内容 大概只有300 1000条记录 static bool lisReady f
  • Fragment中的Toast,应该使用getActivity()还是getAcitivity().getApplicationContext()?

    抱歉我的新手问题 我只是无法从谷歌和stackoverflow找到答案 我刚刚开始学习android 希望能为android知识打下良好的基础 我想知道如果我在片段中创建 toast maketext 我应该在下面使用哪个 getActiv
  • 从无状态 EJB 访问 SessionScoped 对象

    我确实有一个 SessionScoped 课程 对于每个用户访问 我需要一个此类的自己的实例 很长一段时间一切都很顺利 但现在我还需要从后端访问这些对象 而无需任何用户交互 我确实有一个无状态企业 bean 但每当我想访问会话范围对象时 我
  • 使用 EF Core 7 的 .NET 7 控制台应用程序为什么没有 OnConfiguring?

    我首先构建了数据库 NET 7 和 EF Core 7 应用程序 并使用 EF Power Tools 创建上下文和模型类 我继续阅读有关OnConfiguring 在上下文类中 我只有OnModelCreating 我做错了什么 谢谢 道
  • Clojure:转换 Varargs 但保留 Varargs

    我正在用 Clojure 开发一个小宠物项目 我有一个传递可变参数的函数 defn foor bar args let new args custom transform args do something new args But do
  • 从 UITapGestureRecognizer 中删除目标

    我已将操作作为匿名方法添加到我的手势识别器中 UITapGestureRecognizer tapGesture new UITapGestureRecognizer tapGesture AddTarget gt HandleTap ta
  • .Net Core 3.0 Nginx 不提供静态文件

    我有一个 net core 3 0 Web 应用程序 我想在 Debian Buster 服务上运行 我按照微软的说明进行操作发现Here https learn microsoft com en us aspnet core host a
  • 特定递归函数的增长顺序

    以下函数的增长顺序是什么 static int counter 0 static void Example int n if n 1 return for int i 0 i lt n i counter Example n 2 为了解决这
  • 如何在给定的绘图上绘制垂直线

    给定时间表示中的信号图 如何绘制标记相应时间索引的线 具体来说 给定一个时间索引范围从 0 到 2 6 秒 的信号图 我想绘制垂直红线来指示列表的相应时间索引 0 22058956 0 33088437 2 20589566 我该怎么做 添
  • 如何检查Google用户的图片是默认的还是上传的?

    如何检查用户的个人资料图片是默认的还是上传到 Google 的 Note 当您从 API 获取用户详细信息时 所有默认个人资料图片都有以下 URL https lh3 googleusercontent com XdUIqdMkCWA AA
  • 适用于 Safari 浏览器的类似 Firebug 的插件

    Safari 是否有一个开发工具插件 就像 Firefox 的 Firebug 插件一样 Firebug 很棒 但 Safari 提供了自己的内置开发工具 如果您还没有尝试过 Safari 的开发工具包 请转到 Safari gt 首选项
  • Vim 的 Clang 完整版

    我复制了clang complete vim插件 但是当我输入 在一些变量之后 它说 未找到模式 我搜索了这个问题 有人说我应该配置g clang complete auto and g clang complete copen 我怎样才能
  • Swift 从对象数组映射到异步函数数组并等待它们全部

    我刚刚更新到 Xcode 13 2 1 现在可以访问异步等待 并且我正在尝试找到可以从合并 转换 为异步等待的地方 我想实现以下目标 给定一个像 的类型 struct Person let name String func fetchAva
  • React Native 地图:在react-native-maps 中使用自定义标记时,标记图像不显示

    我在用着react native maps但我遇到了一个问题 经过大量谷歌搜索后没有答案让我在这里问它 我正在尝试使用自定义标记作为地图中的标记 如下图所示 当我搜索时我发现需要使用自定义标记来完成创客的设计 然后我创建了一个自定义标记组件