react-native-maps

Adding multiple Polylines on react-native-map with Google API coordinates

◇◆丶佛笑我妖孽 提交于 2020-03-28 07:05:11
问题 I want to place multiple polylines on Google maps in react-native. I'm using the react-native-maps and @mapbox/polyline for creating polylines which I imported at the top: import MapView from 'react-native-maps'; import Polyline from '@mapbox/polyline'; Here is the rest of the code: import { Marker } from 'react-native-maps'; import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Button } from 'react-native'; export default class consults extends Component {

React Native Maps and callout with images

泪湿孤枕 提交于 2020-03-22 08:48:22
问题 I am not able to display images (both from the assets and web) in custom marker callout : the image in callout is always shown as a blank rectangle. class CustomCalloutView extends React.Component { render() { return ( <View> <View> <Text style={{ fontWeight: "bold", }}> Test </Text> </View> <View> <Image source={{ uri: 'https://facebook.github.io/react/logo-og.png' }} style={{ width: 100, height: 100 }} /> </View> </View> ) } } And the main Map component is: <MapView style={{ flex: 1 }}

React Native Maps: Custom Markers cause extreme lag and slow down on android

孤街浪徒 提交于 2020-02-25 02:59:22
问题 I load up to about 2000 markers on the map. It works fine for the first few seconds but then slows down sharply. To fix it I need to clear the app data, then it only works for a few seconds and again like before. const mapMarkers = [ {id: 1, code: "603778", lat: 35.761791, lng: 51.389438}, {id: 2, code: "788621", lat: 35.712278, lng: 51.361785}, {id: 3, code: "129667", lat: 35.674757, lng: 51.485328}, {id: 4, code: "999646", lat: 35.772885, lng: 51.446735}, {id: 5, code: "111524", lat: 35

React Native Maps: Custom Markers cause extreme lag and slow down on android

烈酒焚心 提交于 2020-02-25 02:58:31
问题 I load up to about 2000 markers on the map. It works fine for the first few seconds but then slows down sharply. To fix it I need to clear the app data, then it only works for a few seconds and again like before. const mapMarkers = [ {id: 1, code: "603778", lat: 35.761791, lng: 51.389438}, {id: 2, code: "788621", lat: 35.712278, lng: 51.361785}, {id: 3, code: "129667", lat: 35.674757, lng: 51.485328}, {id: 4, code: "999646", lat: 35.772885, lng: 51.446735}, {id: 5, code: "111524", lat: 35

react-native - How to display map using react-native-maps

穿精又带淫゛_ 提交于 2020-02-07 08:40:19
问题 I am trying to display a Map View using react-native-maps. The component appears to be displaying except it is blank. Is it my stylesheet or am I calling the 'MapView' component right? Here is the code: var MapView = require('react-native-maps'); class Map extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> <MapView style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0,

react-native - How to display map using react-native-maps

≯℡__Kan透↙ 提交于 2020-02-07 08:39:39
问题 I am trying to display a Map View using react-native-maps. The component appears to be displaying except it is blank. Is it my stylesheet or am I calling the 'MapView' component right? Here is the code: var MapView = require('react-native-maps'); class Map extends React.Component { constructor(props) { super(props); this.state = { } } render() { return ( <View style={styles.container}> <MapView style={styles.map} initialRegion={{ latitude: 37.78825, longitude: -122.4324, latitudeDelta: 0.0,

Using same animation in Marker when I press onPress

安稳与你 提交于 2020-01-25 07:25:07
问题 So I just copy these codes of MapView with Custom Animated Markers and Region Focus when is Scrolled in this url. My question is, how can I use the interpolate or the Animated Marker the same as when I press the onPress in my Card View? So the feature will be two now, one is an Animated Marker when is Scrolled and two when is Pressed. I already added how to animate to its Region, now my goal is how can I use Animated Markers when I press the onPress of an item the same as the code when it is

React Native - How to use React Navigation with React Native Maps?

你说的曾经没有我的故事 提交于 2019-12-24 18:46:37
问题 I have a scene that show some monuments in my city. When I press a marker (monument) it shows the name of the monument. What I want to do is, when I press that name I want to transit to a determined scene (with react-navigation). I wrapped the name of monument with a TouchableHighlight and on press I call the 'navigate' method. But it simply dont transit, it does nothing. Not even an error. Here is my code: render(){ const { navigate } = this.props.navigation; const { data } = this.props

Apple maps shows “directions not available” when launched from react-native app

折月煮酒 提交于 2019-12-24 01:19:23
问题 I building a react-native app in which i have used map to show certain locations. I have marked pins for each location on map. Now i want that if user select a marker and click on navigation button(which i have provided on map) it should launch apple map(for ios) and google maps(for android) and show navigation from user's current location to the latitude and longitude that i have passed in the map url. But on apple maps it always show "direction not available" message. Here is how i call map

To enable zoom button in react-native-maps

南楼画角 提交于 2019-12-22 17:59:06
问题 I am using react-native-maps in my native project I need the default zoom control button to zoom in and out How to enable zoom button/control in react-native-maps 回答1: If you rotate the screen once, with enableZoomControl=true, It will show. My problem is that it needs that rotation of the screen(device) to show the first time. 来源: https://stackoverflow.com/questions/47676655/to-enable-zoom-button-in-react-native-maps