时间戳

首页 > 解决方案 > 如何在本地反应中获取坐标并按城市名称放置标记？

javascript - 如何在本地反应中获取坐标并按城市名称放置标记？

问题描述

是否可以仅通过名称获取坐标并在城市上放置标记？我正在尝试获取我的search价值坐标（它是城市）。我正在使用 React Native Maps 并且有我的代码：

import React, {useState} from 'react';
import { View, StyleSheet, Alert, ActivityIndicator } from 'react-native';
import {SearchBar, Button} from 'react-native-elements';
import MapView from 'react-native-maps';
import Spinner from 'react-native-loading-spinner-overlay';

export default function LinksScreen() {
  const [spinner, setSpinner] = useState(false);
  const [search, setSearch] = useState('');
  const handleChange = event => {
    setSearch(event);
  }
  const [latitudePress, setLatitude] = useState('46.54306');
  const [longitudePress,setLongitude] = useState('14.96917');
  function addMarkerAndRequest(e){
    console.log(e.nativeEvent);
    setLatitude(e.nativeEvent.coordinate.latitude); 
    setLongitude(e.nativeEvent.coordinate.longitude);
    const coords = {
      latitude: e.nativeEvent.coordinate.latitude,
      longitude: e.nativeEvent.coordinate.longitude
    };
    Alert.alert(
      'Sprememba mesta',
      'Stanje v komori se bo spremenilo. Ali ste prepričani?',
      [
        {
          text: 'NE',
          style: 'cancel',
        },
        {
          text: 'OK', 
          onPress: () => {
            fetch(`http://192.168.88.253:5000/insert/${coords.longitude}/${coords.latitude}`);
          }
        },
      ],
      {cancelable: false},
    )
  }

  return (
    <View style={styles.container}>
      <Spinner
          visible={spinner}
          textStyle={styles.spinnerTextStyle}
      />
      <SearchBar
        containerStyle={{borderColor:'#eee', borderWidth:1}}
        placeholder="Vnesi mesto.."
        onChangeText={(e) => {setSearch(e)}}
        value={search}
        platform='android'
      />
      <MapView
        style={{width:'100%', height:'80%'}}
        initialRegion={{
        latitude: Number(latitudePress),
        longitude: Number(longitudePress),
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
        }}
        onPress={ (event) => addMarkerAndRequest(event) }
      >
        <MapView.Marker
            coordinate={{latitude: Number(latitudePress),
            longitude: Number(longitudePress)}}
            title={`ZŠ: ${latitudePress}, ZD: ${longitudePress}`}
         />
      </MapView>
      <Button 
        onPress={()=>Alert.alert(
          'Sprememba mesta',
          'Stanje v komori se bo spremenilo. Ali ste prepričani?',
          [
            {
              text: 'NE',
              style: 'cancel',
            },
            {
              text: 'OK', 
              onPress: () => {
                fetch(`http://192.168.88.253:5000/insertcity/${search}`);
                setSearch('');
              }
            },
          ],
          {cancelable: false},
        )}
        title='POTRDI'
      ></Button>
    </View>
  );
}

LinksScreen.navigationOptions = {
  title: 'Zemljevid',
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent:'space-between'
  },
});

标签： javascriptandroidreactjsreact-nativegoogle-maps

解决方案

您可以按照此处所述进行 google 地方搜索 - https://developers.google.com/places/web-service/search

您需要设置一个 google API 密钥才能使其正常工作（文档描述了如何执行此操作）。

一旦您从地点搜索中获得了正确的响应（响应可能返回多个结果，但您正在寻找types包含该值的结果locality- 它是一个地区/城市类型的地方），您可以使用响应geometry.location（检查响应在这里 - https://developers.google.com/places/web-service/search#find-place-responses）获取坐标并将标记放置在您的地图上

推荐阅读