React Native Maps:在react-native-maps中未使用“自定义标记"显示Markers图像 [英] React Native Maps: Markers image doesn't show using Custom Marker in react-native-maps

问题描述

我正在使用react-native-maps，但是我遇到了一个问题，在经过大量的无人查阅之后，我不得不在这里提出问题. 我正尝试将自定义标记"用于地图中的标记，如下图所示

I'm using react-native-maps but I faced a problem that after a lot of googling without answer makes me ask it here. I'm trying to use Custom Marker for the marker in the map as the following picture

• 在搜索时，我发现需要使用Custom Marker来完成制造商的设计，然后我创建了Custom Marker组件

• as I searched I found out that needed to use Custom Marker to accomplish the maker's design, then I created a Custom Marker component

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类时，它可以正常工作并显示图像，但是当我将其用作标记自定义视图时，它不显示图像

when I use CustomMarker.js class solely it works fine and it shows the image but when I use it as the marker custom view it doesn't show the image

我不知道为什么它无法使用android中的Custom Marker渲染图像. 这是我使用地图，标记和自定义标记类的代码

I don't know why it can't render the image with Custom Marker in android. and here is my code where I'm using map, markers and custom marker class

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>

任何帮助将不胜感激.

推荐答案

为此rel = "noreferrer"> 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>

这篇关于React Native Maps:在react-native-maps中未使用“自定义标记"显示Markers图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！