!если вы не используете выставку, пожалуйста, прокомментируйте, и я немного изменю ответ!
Прежде всего, поскольку вы, вероятно, знаете, что вам необходимо создать учетную запись на ЗДЕСЬ Разработчик webiste .
После того, как вы создали учетную запись, вам нужно создать проект (вы можете получить план Freemium бесплатно, и у него есть множество доступных запросов бесплатно, обновите, если вам нужно больше).После этого вам нужно «Сгенерировать приложение» для REST & XYZ HUB API / CLI на странице вашего проекта.После этого вы получите APP ID и APP CODE.На этом настройка учетной записи разработчика HERE завершена.
Теперь перейдем к React Native.
Прежде всего вам необходимо установить пакет npm с именем react-native-maps, который мы будем использовать для отображенияданные, которые ЗДЕСЬ предоставляет.Вы можете увидеть инструкции по установке здесь .
После этого давайте предположим, что вы уже создали компонент, который будет отображать карту.Вам нужно импортировать это:
import { Marker, Polyline } from 'react-native-maps'
import { MapView } from 'expo'
. Теперь наша карта почти готова.
В этом примере я буду использовать axios, но вы можете использовать fetch для отправки запросовЗДЕСЬ, если хотите.
Поэтому мы импортируем axios (если вы никогда не работали с ним, вы можете узнать о нем больше здесь ):
import axios from 'axios'
Теперь вам следуетиметь координаты этих двух местоположений, готовых в состоянии или где-то еще, и это должно выглядеть примерно так:
constructor(props){
super(props)
this.state = {
startingLocation: {
latitude: "xx.x",
longitude: "yy.y",
},
finishLocation: {
latitude: "xx.x",
longitude: "yy.y",
}
}
}
С "xx.x" и "yy.y" - это фактические координаты, которые вы хотите.
Так что теперь, когда у вас есть координаты начального и конечного местоположения, вы можете сделать запрос к вашему проекту HERE API.Это так просто (я получил этот API от здесь ):
// I will create a function which will call this, you can call it whenever you want
_getRoute = () => {
// we are using parseFloat() because HERE API expects a float
let from_lat = parseFloat(this.state.startingLocation.latitude)
let from_long = parseFloat(this.state.startingLocation.longitude)
let to_lat = parseFloat(this.state.finishLocation.latitude)
let to_long = parseFloat(this.state.finishLocation.longitude)
// we will save all Polyline coordinates in this array
let route_coordinates = []
axios.get(`https://route.api.here.com/routing/7.2/calculateroute.json?app_id=PUT_YOUR_APP_ID_HERE&app_code=PUT_YOUR_APP_CODE_HERE&waypoint0=geo!${from_lat},${from_long}&waypoint1=geo!${to_lat},${to_long}&mode=fastest;bicycle;traffic:disabled&legAttributes=shape`).then(res => {
// here we are getting all route coordinates from API response
res.data.response.route[0].leg[0].shape.map(m => {
// here we are getting latitude and longitude in seperate variables because HERE sends it together, but we
// need it seperate for <Polyline/>
let latlong = m.split(',');
let latitude = parseFloat(latlong[0]);
let longitude = parseFloat(latlong[1]);
routeCoordinates.push({latitude: latitude, longitude: longitude});
}
this.setState({
routeForMap: routeCoordinates,
// here we can access route summary which will show us how long does it take to pass the route, distance etc.
summary: res.data.response.route[0].summary,
// NOTE just add this 'isLoading' field now, I'll explain it later
isLoading: false,
})
}).catch(err => {
console.log(err)
})
}
ПРИМЕЧАНИЕ Здесь есть несколько вещей, на которые стоит обратить внимание.Во-первых, вы должны заменить идентификатор приложения и код приложения на действительный идентификатор приложения и код приложения из своего проекта ЗДЕСЬ.Второе замечание: я добавил &legAttributes=shape в конце URL-адреса запроса, но его нет в документации.Я поставил его таким образом, чтобы координаты Полилинии имели правильную форму, если вы не укажете ее, она просто ответит координатами поворотов дороги, и эта полилиния пройдет по зданиям и тому подобному, просто будет плохо выглядеть.
OK.Итак, теперь у нас есть координаты для создания полилинии, давайте сделаем это.
<MapView>
<Polyline coordinates={this.state.routeForMap} strokeWidth={7} strokeColor="red" geodesic={true}/>
<Marker coordinate={{latitude: this.state.startingLocation.latitude, longitude: this.state.startingLocation.longitude}} title="Starting location"/>
<Marker coordinate={{latitude: this.state.finishLocation.latitude, longitude: this.state.finishLocation.longitude}} title="Finishlocation"/>
</MapView>
Объяснение: Polyline.coordinates отобразит все предоставленные нами координаты и нарисует полилинию.strokeWidth - это то, насколько толстой должна быть ваша линия, а strokeColor - это, очевидно, цвет линии.
Теперь вам нужно добавить region к вашему компоненту MapView, чтобы он знал, какую начальную область выхочу показать на карте.Поэтому я предлагаю вам сделать что-то вроде этого:
В состоянии определите поле региона и задайте ему те же координаты, что и в начальной позиции, а затем установите дельту, чтобы увеличить изображение.
// so in state just add this
region: {
latitude: parseFloat("xx.x"),
longitude: parseFloat("yy.y"),
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}
А теперь добавьте region={this.state.region} в MapView.
Вы бы сделали это сейчас, но давайте удостоверимся, что это работает каждый раз.Вы должны убедиться, что запрос HERE API завершен, прежде чем карта будет отображаться.Я бы сделал это так:
// in your state define field to control if loading is finished
isLoading: true,
Теперь вы бы вызвали функцию _getRoute(), которую мы сделали ранее в функции жизненного цикла componendDidMount (), предоставленной React Native.Например:
componentDidMount() {
// when this function is finished, we will set isLoading state to false to let program know that API request has finished and now we can render the map
this._getRoute()
}
Итак, наконец, последний шаг - управление isLoading в вашей функции render ():
render() {
if(this.state.isLoading) {
return (
<Text>Loading...(you could also use <ActivityIndicator/> or what ever you want to show while loading the request)</Text>
)
} else {
// just put everything we already did here + stuff you already have
}
}
Итак, вот оно.Я постарался сделать это как можно более подробным, чтобы вам и другим людям, которые будут нуждаться в помощи, было легко.
Не стесняйтесь спрашивать меня, если что-то неясно, или это не работает, или вынужна дополнительная помощь!Я всегда рад помочь: D