这里是 react-native 移动应用程序中的地图集成

Question

我正在尝试在 react-native 项目中实现 heremap api 。虽然搜索得到了https://www.npmjs.com/package/react-native-hemaps。但是没有合适的文档来使用这个库。我是本机反应的新手。请给我一些建议来实现这一点。

Answer 1

！如果您不使用 expo 请发表评论，我会稍微更改答案！

首先，您可能知道您需要在HERE Developer webiste 上注册一个帐户。

创建帐户后，您必须创建一个项目（您可以免费获得免费增值计划，它有很多免费可用的请求，如果您需要更多，请升级）。之后，您需要在项目页面为 REST & XYZ HUB API/CLI“生成应用程序”。这样，您将收到 APP ID 和 APP CODE。有了这一切，HERE 开发者帐户设置就完成了。

现在让我们跳到 React Native。

首先，您需要安装一个名为 npm 的包react-native-maps，我们将使用它来显示 HERE 提供的数据。您可以在此处查看安装说明。

在此之后，假设您已经创建了一个将显示地图的组件。你需要导入这个：

import { Marker, Polyline } from 'react-native-maps'
import { MapView } from 'expo'

有了这个，我们的地图几乎准备好了。

我将axios在此示例中使用，但fetch如果您愿意，您可以使用它向 HERE 发出请求。

所以我们导入 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 ）：

import { Marker, Polyline } from 'react-native-maps'
import { MapView } from 'expo'

注意这里有几件事需要注意。首先，您必须将 APP ID 和 APP CODE 替换为您的 HERE 项目中的实际 APP ID 和 APP CODE。第二个注意事项是我&legAttributes=shape在请求 URL 的末尾添加了但它不在文档中。我把它放在那里，所以折线坐标有一个正确的形状，如果你不放它，它只会响应道路转弯的坐标，折线会穿过建筑物和东西，它看起来很糟糕。

好的。所以现在我们有了坐标来制作折线，让我们这样做。

<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 组件添加，让它知道您想要在地图上显示的初始区域是什么。所以我建议你做这样的事情：

在 state 中，定义一个 region 字段，使其与起始位置的坐标相同，然后设置 delta 使视图更大一点。

import axios from 'axios'

现在，添加region={this.state.region}到 MapView。

你现在就完成了，但让我们确保每次都能正常工作。您需要确保 HERE API 请求在地图呈现之前完成。我会这样做：

constructor(props){
    super(props)
    this.state = {
        startingLocation: {
            latitude: "xx.x",
            longitude: "yy.y",
        },
        finishLocation: {
           latitude: "xx.x",
           longitude: "yy.y",
        }
    }
}

现在，您将调用_getRoute()我们之前在 React Native 提供的 componendDidMount() 生命周期函数中创建的函数。像这样：

// 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)
    })
}

所以最后最后一步是控制isLoading你的 render() 函数：

<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>

所以在这里。我试图使其尽可能详细，以便您和其他需要帮助的人轻松完成。

如果有什么不清楚或不起作用或您需要更多帮助，请随时向我提问！我总是很乐意提供帮助 :D