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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/huhao0829/article/details/78782880

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 (
      <View>
        <Button
          onPress={() => {
            Linking.canOpenURL(this.state.url).then(supported => {
              if (supported) {
                Linking.openURL(this.state.url);
              } else {
                console.log('无法打开该URI: ' + this.props.url);
              }
            })
          }}
          title="进入高德导航"
        />
      </View>
    );
  }
}

3. 开心使用

展开阅读全文

没有更多推荐了,返回首页