1, First, encapsulate the method to distinguish whether the current environment is ios or android

    RunningPlatform() {
      let ua = navigator.userAgent.toLowerCase()
      console.log('kernel', ua);
      // ios
      if(ua.indexOf('like mac os x') > -1) {
        this.OS = 'IOS'
      }
      // android
      if(ua.indexOf('android') > -1) {
        this.OS = 'Android'
      }
      console.log('OS', this.OS)
    },

2, Encapsulates the method of adjusting the map according to the current running environment

Whether JS can detect whether an APP software is installed on the user's mobile phone remains to be solved...

1. Tencent map

Official documents

1. Interface call description
   It is suitable for mobile phone APP and mobile phone browser to tune Tencent map APP. iOS calls through scheme and Android uses Intent. The unified protocol is: qqmap://map/
   2.JS calling method: directly call the link of the column such as the example given by the official through location.href
   3. Packaging

    tengxun() {
      // Using the perimeter search function
      console.log('tencent');
      // https://lbs.qq.com/webApi/uriV1/uriGuide/uriMobileRoute
      if (this.OS === 'IOS') {
        console.log('IOS');
        location.href = `qqmap://map/search?keyword = keywords to search & center = coordinates of the middle point in the search area 8 & radius = search range & referer = developer key value`
      }
      if (this.OS === 'Android') {
        console.log('Android');
        location.href = `qqmap://map/search?keyword = keywords to search & center = coordinates of the middle point in the search area 8 & radius = search range & referer = developer key value`
      }	
    },

2. Baidu map

Official documents

1. Introduction: developers only need to construct a standard URI according to the URI API interface specification, and then they can directly invoke Baidu map products (such as Baidu web map and Baidu map client) for map display or retrieval, line query, navigation and other functions in PC & mobile browser or mobile development applications, Meet the application request of developers to directly call map products under specific business scenarios,
2. agreement:
   Android: baidumap://map/
   ios: baidumap://map/
3. JS calling method: directly call the link of the column such as the example given by the official through location.href
4. encapsulation

    baidu() {
      // Using keyword search
      console.log('Baidu');
      // https://lbsyun.baidu.com/index.php?title=uri
      if (this.OS === 'IOS') {
        console.log('IOS');
        window.location.href = `baidumap://map/place/search?query = search keyword & location = longitude and latitude of center point & radius = search radius & SRC = IOS. Baidu. Openapidemo "`
      }
      if (this.OS === 'Android') {
        console.log('Android');
        window.location.href = `bdapp://map/place/search?query = search keywords & location = longitude and latitude of center point & radius = search radius & SRC = andr.baidu.openapidemo`
      }
    },

3. Gaode map

Official documents

1. Introduction: the third party calling URI API is mobile phone version of the High German map, which is a method for developers to call the app map in their own applications. Developers only need to construct a standard URI according to the URI API provided, and put it in their own application program, then they can call the high earth map APP to perform POI punctuation, bus, driving inquiries and other functions.
2. Protocol (map annotation):
   Android: an droidamap://viewMap
   ios: iosamap://viewMap
3. JS calling method: directly call the link of the column such as the example given by the official through location.href
4. encapsulation

    toGaoDe() {
      // Using the map annotation feature
      if (this.OS === 'IOS') {
        console.log('IOS');
        location.href = `iosamap://Viewmap? Sourceapplication = ApplicationName & poiname = search keywords & lat = latitude & lon = Longitude & Dev = 0`
      }
      if (this.OS === 'Android') {
        console.log('Android');
        location.href = `androidamap://Viewmap? Sourceapplication = appName & poiname = search keywords & lat = latitude & lon = Longitude & Dev = 0`
      }
    },