ReactNative 自定义放置在 Mapview 上的标记

Question

我将把这些标记称为放置在react-native-maps模块中使用的MapView上的标记。

默认标记的示例可以在帖子底部找到。每个标记应该引用一些具有服务的建筑物，在这个特定的示例中，假设每个标记都指向一家医院。

以下是根据解决方案的预期复杂性排序的问题。

1.是否可以自定义地图上每个标记的外观？

---

正如您可以参考帖子底部的图像，我希望能够碰巧放置在地图上的每个标记的外观。

它可能是图像，也可能是定制的视图。

2.是否可以自定义每个标记被单击时的行为？

---

例如，当单击标记时，我想1）检索医院的信息以及到达每家医院的预计行程时间，然后2）以自定义视图的格式显示这些信息。

这是默认标记的示例。

Answer 1

1. 是的，您可以使用 image

    对象的 

   <Marker/>

    属性

   来更改标记的图标。如果您在使用 json 数据时有此信息，您可以放置一个条件语句来检查您将使用的图标类型。

2. 如果您像下面的示例一样循环访问 json 文件，则可以使用

   <CallOut />

   对象来显示 json 文件中的标记信息。它将自动从 json 文件中获取为每个坐标创建的每个标记的数据。

示例代码和下面的代码片段：

App.js

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView, { Marker, Callout } from 'react-native-maps';
import data from './data.json';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
  callout: {
    backgroundColor: 'white',
    borderRadius: 4,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 4,
  },
  title: {
    color: 'black',
    fontSize: 14,
    lineHeight: 18,
    flex: 1,
  },
});

class MapApp extends Component {
  dragEnded = (e) => {
    console.log("clicked");
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 40.756795,
            longitude: -73.954298,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
          {data.map((loc) => (
            <Marker
              coordinate={{ latitude: loc.lat, longitude: loc.lng }}
              image={
                loc.type == 'hospital'
                  ? require('./assets/hosp.png')
                  : require('./assets/green.png')
              }
              description={loc.desc}
              draggable
              onDragEnd={this.dragEnded}>
              <Callout tooltip style={styles.callout}>
                <View>
                  <Text style={styles.title}>{loc.desc}</Text>
                </View>
              </Callout>
            </Marker>
          ))}
        </MapView>
      </View>
    );
  }
}

export default MapApp;

---

数据.json

[{
  "desc": "This is Hospital",
  "lat":40.756795,
  "lng":-73.954298,
  "type":"hospital"
},
{
  "desc": "This is Green House",
  "lat":40.753167,
  "lng":-73.968120,
  "type":"green"
}]

Answer 2

是否可以在每个标记上的图像上显示文本？我的意思是我有一个一般图像，我需要在上面显示一个数字，所以我不想创建大量图像。预先感谢！