Google maps Img тег React Native - PullRequest
Новая
       10

Google maps Img тег React Native

0 голосов
/ 20 октября 2019

В настоящее время я работаю с Google Api, и кажется, что моя карта по какой-то причине заблокирована. Я использую код в API, но я не понимаю, почему я не могу перемещаться по карте, он статичен (как в коде, он хранится в изображении). Мне интересно, как действовать, чтобы иметь возможность перемещаться по карте и одновременно показывать мое местоположение, заранее благодарю за помощь.

вот мой код 

import React from 'react';
import { TouchableOpacity, Image, StyleSheet } from 'react-native';
import MapView from 'react-native-maps'


import ENV from '../env';

const MapPreview = props => {
  let imagePreviewUrl;

  if (props.location) {
    imagePreviewUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
      props.location.lat
    },${
      props.location.lng
    }&zoom=2&size=200x200&maptype=roadmap&markers=color:red%7Clabel:A%7C${
      props.location.lat
    },${props.location.lng}&key=${ENV.googleApiKey}`;
  }

  return (
    <TouchableOpacity onPress={props.onPress} style={{ ...styles.mapPreview, ...props.style }}>
      {props.location ? (
        <Image style={styles.mapImage} source={{ uri: imagePreviewUrl }} />
      ) : (
        props.children
      )}
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  mapPreview: {
    justifyContent: 'center',
  },
  mapImage: {
    width: '100%',
    height: '100%'
  }
});

export default MapPreview;

Вот изображение того, что я получаю: Здесь

1 Ответ

0 голосов
/ 20 октября 2019

попробуйте увеличить параметр масштабирования, который вы используете на imagePreviewUrl. Вместо этого: 

imagePreviewUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
    props.location.lat
    },${
    props.location.lng
    }&zoom=2&size=200x200&maptype=roadmap&markers=color:red%7Clabel:A%7C${
    props.location.lat
    },${props.location.lng}&key=${ENV.googleApiKey}`;

Увеличьте масштаб с 2 до 15: 

imagePreviewUrl = `https://maps.googleapis.com/maps/api/staticmap?center=${
    props.location.lat
    },${
    props.location.lng
    }&zoom=15&size=200x200&maptype=roadmap&markers=color:red%7Clabel:A%7C${
    props.location.lat
    },${props.location.lng}&key=${ENV.googleApiKey}`;

Надеюсь, этоПомогает!

...