我在用着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(使用前将#替换为@)