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

【问题标题】：ReactNative Customize markers placed on MapviewReactNative 自定义放置在 Mapview 上的标记
【发布时间】：2021-12-31 07:20:48
【问题描述】：

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

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

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

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

您可能会参考帖子底部的图片，我希望能够偶然发现放置在地图上的每个标记的外观。

可能是图像，也可能是自定义视图。

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

例如，当点击标记时，我想 1) 检索医院的信息和预计到每家医院的旅行时间，然后 2) 以定制视图的格式显示这些信息。

这是默认标记的示例。

image_default_marker

【问题讨论】：

请编辑问题以将其限制为具有足够详细信息的特定问题，以确定适当的答案。

标签： react-native google-maps google-maps-markers react-native-maps

【解决方案1】：

是的，您可以使用<Marker/> 对象的image property 来更改标记的图标。如果您在使用 json 数据时有此信息，则可以放置一个条件语句来检查您将使用的图标类型。
如果您像下面的示例那样循环访问 json 文件，您可以使用 <CallOut /> 对象从 json 文件中显示您的标记信息。它将自动从 json 文件中为每个坐标创建的每个标记获取数据。

Sample code 和下面的代码 sn-p：

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;

data.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"
}]

【讨论】：