Multi terminal third party map location method supported by uni app

brief introduction

This method supports jump to the third party map and locate the specified coordinates.

The app will jump to Baidu map (third-party software); if not, go to Gaode map (third-party software); if none, open Tencent map (uni’s own method: uni.openLocation )
Other terminals open Tencent map (uni method: uni.openLocation )

demo

Source code: https://github.com/yapeee/uni-components

Test data:

wgs84: 39.9078008469, 116.391290596
bd09: 39.915547, 116.403909
gcj02: 39.9091591069, 116.3974783161

Basic usage

import Map from '../ms-openMap.js'
Map.openMap(latitude, longitude, name, coord_type)

Attribute description

Implementation scheme

First of all, determine the running platform of the program, and different platforms call different methods to open the map. Under Android and IOS platform, judge and open Baidu map and Gaode map. On other platforms, open Tencent Map Web Version (uni’s own method).

1、 Judge the operation platform

Through conditional compilation and uni.getSystemInfoSync (). Platform to judge Android, IOS and other platforms.

// #ifdef APP-PLUS
switch(uni.getSystemInfoSync().platform){
  case 'android':
    console.log ('running on Android ')
    openMapByAndroid(latitude, longitude, name)
    break;
  case 'ios':
    console.log ('run on IOS')
    openMapByIos(latitude, longitude, name)
    break;
  default:
    openMapByDefault(latitude, longitude, name)
    console.log ('run on developer tools')  
    break;
}  
// #endif
// #ifndef APP-PLUS
openMapByDefault(latitude, longitude, name)
// #endif
tips：

There are two scenarios for platform judgment, one is at compile time, the other is at run time.

Compile time judgment:That is conditional compilation. Different platforms have different codes after compiling packages.

Operation period judgment:Runtime judgment refers to that the code has been put into the package and still needs to be judged in the runtime platform, which can be used at this time uni.getSystemInfoSync (.Platform) to determine whether the client environment is Android, iOS or a small program development tool (in Baidu applet development tools, WeChat applet development tools, Alipay applet development tools) uni.getSystemInfoSync ().platform The return values are all devtools).

2、 How to open the third party map in app

HTML5 + is a middleware that connects the SDK and the page. It is used for the page to call the underlying SDK interface through JS.

2.1. App judges whether the third-party application exists

/*
 *Appinf: (applicationinf) required to determine the description of the third-party program
 *Android platform needs to set the pname attribute (package name) of appinf to query. 
 *The IOS platform needs to set the action attribute (scheme) of appinf to query. After IOS 9, you need to add a white list to query,
 *In manifest.json Add file plus > distribute > Apple > urlschemewhitelist node (for example, urlschemewhitelist: ["Weixin"])
 */
plus.runtime.isApplicationExist(appInf);

2.1.1. Judge whether Baidu map application exists

plus.runtime.isApplicationExist({pname: 'com.baidu.BaiduMap', action: 'baidumap://'})

2.1.2 judge whether the application of Gaode map exists

plus.runtime.isApplicationExist({pname: 'com.autonavi.minimap'},action: 'iosamap://'})

2.2. App calls the third-party program to open the specified URL

/*
 *Description: call a third-party program to open the specified URL
 *Parameters:
 *URL: (string) required URL address to open
 *Errorcb: (openerrorcallback) optional to open the callback with URL address failure
 *Identity: (string) optional. Specifies the name of the program to open the URL address
 */
plus.runtime.openURL( url, errorCB, identity );

2.2.1 open the application of the third-party program

function openURL(url, identity ) {
  let newurl = encodeURI(url);
  plus.runtime.openURL( newurl, function(res){
    uni.showModal({
      content: res.message
    })
  }, identity);
}

2.2.2. Open Android Baidu map

url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
identity = 'com.baidu.BaiduMap'
openURL(url, identity)

2.2.3. Open Android map

url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
identity = 'com.autonavi.minimap'
openURL(url, identity)

2.2.4 open IOS Baidu map

url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
openURL(url, identity)

2.2.5 open IOS gaude map

url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
openURL(url, identity)

3、 How to open maps on other platforms

Other platforms adopt uni.openLocation The (object) method uses the app built-in map to view the location.

uni.openLocation({
  latitude: latitude,
  longitude: longitude,
  name: name,
  fail: () => {
    uni.showModal({
      Content: 'failed to open map, please repeat'
    })
  },
})

Update log

2020-01-02

Support bd-09 (Baidu coordinate), gcj-02 (Gaode, Tencent), WGS-84 (GPS coordinate) coordinate system.

2019.12.10

For the first time, it supports jump to the third party map and locate the specified coordinates.

reference resources

Baidu map URI API
Gould map URI API
uni-app HTML5+ API

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.