时间戳

首页 > 解决方案 > 谷歌地图 Img 标签 React Native

reactjs - 谷歌地图 Img 标签 React Native

问题描述

我目前正在使用 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;

这是我得到的图片：这里

标签： reactjsgoogle-mapsreact-nativegoogle-api

解决方案

尝试增加您在 So 上使用的缩放参数，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}`;

希望这可以帮助！

推荐阅读