地图无法在视图中呈现,使用 React-Native-Maps npm 包,经度和纬度。

huangapple go评论65阅读模式
英文:

Map is not rendering in View using React-Native-Maps npm package with long and lat

问题

I have a react native project I am building. I am trying to integrating react-native-maps. I currently have a View that is 400px X 400px that I want to render a map into with initial market. I currently have the view setup to render Los Angeles, CA as the center point with the longitude and latitude. Right now it is not rendering anyhing except for the view with the background I created. I want to render the map and have it interactive. Can anyone help me figure out why it is not rendering anything??

code snippet for component:

import React, { useContext, useEffect, useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'

import MapView from 'react-native-maps';

import { PropertiesContext } from '../../Context/PropertiesContext';

const MainMapsConponents = () => {
  const {cityLat, cityLong} = useContext(PropertiesContext)

  return (
    <View>
      <View>
        <Text>{cityLat} - {cityLong}</Text>
      </View>
      <View style={styles.mapWindow}>
        <MapView 
          scrollEnabled={true}
          zoomEnabled={true}
          zoomTapEnabled={true}
          style={styles.map} 
          initialRegion={{
            latitude: cityLat,
            longitude: cityLong,
            latitudeDelta: 0.5,
            longitudeDelta: 0.5,
          }}
        ></MapView>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  mapWindow: {
    height: '100%',
    width: '100%',
    backgroundColor: 'lightgrey'
  }
})

export default MainMapsConponents

Here is a screenshot of what I am seeing:
地图无法在视图中呈现,使用 React-Native-Maps npm 包,经度和纬度。

英文:

I have a react native project I am building. I am trying to integrating react-native-maps. I currently have a View that is 400px X 400px that I want to render a map into with initial market. I currently have the view setup to render Los Angeles, CA as the center point with the longitude and latitude. Right now it is not rendering anyhing except for the view with the background I created. I want to render the map and have it interactive. Can anyone help me figure out why it is not rendering anything??

code snippet for component:

import React, { useContext, useEffect, useState } from &#39;react&#39;
import { View, Text, StyleSheet } from &#39;react-native&#39;

import MapView from &#39;react-native-maps&#39;;

import { PropertiesContext } from &#39;../../Context/PropertiesContext&#39;

const MainMapsConponents = () =&gt; {
  const {cityLat, cityLong} = useContext(PropertiesContext)

  return (
    &lt;View&gt;
      &lt;View&gt;
        &lt;Text&gt;{cityLat} - {cityLong}&lt;/Text&gt;
      &lt;/View&gt;
      &lt;View style={styles.mapWindow}&gt;
        &lt;MapView 
          scrollEnabled={true}
          zoomEnabled={true}
          zoomTapEnabled={true}
          style={styles.map} 
          initialRegion={{
            latitude: cityLat,
            longitude: cityLong,
            latitudeDelta: 0.5,
            longitudeDelta: 0.5,
          }}
        &gt;&lt;/MapView&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  )
}

const styles = StyleSheet.create({
  mapWindow: {
    height: &#39;100%&#39;,
    width: &#39;100%&#39;,
    backgroundColor: &#39;lightgrey&#39;
  }
})

export default MainMapsConponents

Here is a screenshot of what I am seeing:
地图无法在视图中呈现,使用 React-Native-Maps npm 包,经度和纬度。

答案1

得分: 1

以下是翻译好的部分:

你需要正确设置 Google 地图,适用于 Android 和 iOS,从这里

工作代码:

import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import MapView, { Callout, Marker } from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;

const MapDemo = () => {

    const data = {
        region: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
        },
    }

    return (
        <View style={styles.container}>
            <MapView
                style={styles.map}
                initialRegion={data}
                scrollEnabled={true}
                zoomEnabled={true}
                zoomTapEnabled={true}
                loadingEnabled
                loadingIndicatorColor="#666666"
                loadingBackgroundColor="#eeeeee">

                <Marker
                    coordinate={{
                        latitude: LATITUDE - SPACE,
                        longitude: LONGITUDE - SPACE,
                    }}
                    centerOffset={{ x: -42, y: -60 }}
                    anchor={{ x: 0.84, y: 1 }}>
                    <Callout>
                        <View>
                            <Text>This is a plain view</Text>
                        </View>
                    </Callout>
                </Marker>
            </MapView>
            <View style={styles.buttonContainer}>
                <View style={styles.bubble}>
                    <Text>Map with Loading</Text>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        ...StyleSheet.absoluteFillObject,
    },
    bubble: {
        backgroundColor: 'rgba(255,255,255,0.7)',
        paddingHorizontal: 18,
        paddingVertical: 12,
        borderRadius: 20,
    },
    buttonContainer: {
        flexDirection: 'row',
        marginVertical: 20,
        backgroundColor: 'transparent',
    },
});

export default MapDemo;

地图无法在视图中呈现,使用 React-Native-Maps npm 包,经度和纬度。

英文:

You need to set it up properly google maps for android and iOS from here.

Working Code:

import React from &#39;react&#39;;
import { Dimensions, StyleSheet, Text, View } from &#39;react-native&#39;;
import MapView, { Callout, Marker } from &#39;react-native-maps&#39;;
const { width, height } = Dimensions.get(&#39;window&#39;);
const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const SPACE = 0.01;
const MapDemo = () =&gt; {
const data = {
region: {
latitude: LATITUDE,
longitude: LONGITUDE,
latitudeDelta: LATITUDE_DELTA,
longitudeDelta: LONGITUDE_DELTA,
},
}
return (
&lt;View style={styles.container}&gt;
&lt;MapView
style={styles.map}
initialRegion={data}
scrollEnabled={true}
zoomEnabled={true}
zoomTapEnabled={true}
loadingEnabled
loadingIndicatorColor=&quot;#666666&quot;
loadingBackgroundColor=&quot;#eeeeee&quot;&gt;
&lt;Marker
coordinate={{
latitude: LATITUDE - SPACE,
longitude: LONGITUDE - SPACE,
}}
centerOffset={{ x: -42, y: -60 }}
anchor={{ x: 0.84, y: 1 }}&gt;
&lt;Callout&gt;
&lt;View&gt;
&lt;Text&gt;This is a plain view&lt;/Text&gt;
&lt;/View&gt;
&lt;/Callout&gt;
&lt;/Marker&gt;
&lt;/MapView&gt;
&lt;View style={styles.buttonContainer}&gt;
&lt;View style={styles.bubble}&gt;
&lt;Text&gt;Map with Loading&lt;/Text&gt;
&lt;/View&gt;
&lt;/View&gt;
&lt;/View&gt;
)
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
justifyContent: &#39;flex-end&#39;,
alignItems: &#39;center&#39;,
},
map: {
...StyleSheet.absoluteFillObject,
},
bubble: {
backgroundColor: &#39;rgba(255,255,255,0.7)&#39;,
paddingHorizontal: 18,
paddingVertical: 12,
borderRadius: 20,
},
buttonContainer: {
flexDirection: &#39;row&#39;,
marginVertical: 20,
backgroundColor: &#39;transparent&#39;,
},
});
export default MapDemo;

地图无法在视图中呈现,使用 React-Native-Maps npm 包,经度和纬度。

huangapple
  • 本文由 发表于 2023年4月13日 15:11:53
  • 转载请务必保留本文链接:https://go.coder-hub.com/76002605.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定