react-native调起第三方高德地图导航URL解释

react-native调起第三方高德地图导航URL解释

做react-native地图应用时，主要使用的是高德地图，所以在导航上也准备调起高德地图应用来完成导航功能，在高德地图API官网并没有发现高德地图应用的URL（这里就不得不说高德文档没有百度写的详细了），于是通过种种途径获取到了高德地图的URL，介绍一下

---

1. 高德地图导航URL

sourceApplication:你自己应用的名字，可不填
slat：起点的latitude
slon：起点的longitude
sname：起点名
dlat：终点的latitude
dlon：终点的longitude
dname：终点名
其他几个参数目前我这样写是满足我的需求的。

androidamap://route?sourceApplication=TCSP&sid=BGVIS1&slat=39.98871&slon=116.43234&sname=对外经贸大学&did=BGVIS2&dlat=40.055878&dlon=116.307854&dname=北京&dev=0&m=0&t=2

2. RN代码

这个就比较简单了，直接打开你创建的rn项目中android目录，找到里面的androidManifest.xml,第二行中就是packagename

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Button,
  Linking
} from 'react-native';
export default class LaunchImage extends Component {
     
  static navigationOptions = {
    title: 'Launch',    //设置navigator的title
  }
  constructor(props) {
    super(props);
    this.state = {
      url: 'androidamap://route?sid=BGVIS1&slat=39.98871&slon=116.43234&sname=对外经贸大学&did=BGVIS2&dlat=40.055878&dlon=116.307854&dname=北京&dev=0&m=0&t=2',
    }
  }
  render() {
    return (
      
         {
            Linking.canOpenURL(this.state.url).then(supported => {
              if (supported) {
                Linking.openURL(this.state.url);
              } else {
                console.log('无法打开该URI: ' + this.props.url);
              }
            })
          }}
          title="进入高德导航"
        />
      
    );
  }
}

3. 开心使用