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

Posted 2023-05-07

【中文标题】如何在本地反应中获取坐标并按城市名称放置标记？

【英文标题】：How to get coordinates and put marker by city name in react native?

【发布时间】：2020-06-01 09:33:09

【问题描述】：

是否可以仅通过名称获取坐标并在城市上添加标记？我正在尝试获取我的 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'
  ,
);

【参考方案1】：

您可以按照此处所述进行 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）获取坐标并将标记放置在地图上