h5 判断安卓是否安装高德

1234

各位大佬 在线等啊

openMap() {
let url = 'https://www.amap.com/'
window.location.href = url
},

var hasAmap = plus.runtime.isApplicationExist({pname:'com.autonavi.minimap',action:'androidamap://'}); //是否安装了高德地图，返回Boolean类型

使用uniapp提供的JSBridge调用原生API，判断是否能够跳转到高德地图的URL Scheme。

如果可以跳转，说明用户已经安装了高德地图，可以直接跳转到高德地图。

如果无法跳转，说明用户没有安装高德地图，可以提示用户下载安装。

// 判断是否安装高德地图  
function isAMapInstalled() {  
  // 高德地图的URL Scheme  
  var urlScheme = 'iosamap://';  

  // 判断是否可以跳转  
  uni.invoke('getSystemInfo', {  
    success: function(res) {  
      if (res.platform == 'android') {  
        // 安卓设备  
        uni.invoke('canOpenURL', {  
          url: urlScheme,  
          success: function(res) {  
            if (res.result) {  
              // 可以跳转，说明已经安装了高德地图  
              console.log('已安装高德地图');  
            } else {  
              // 无法跳转，说明没有安装高德地图  
              console.log('未安装高德地图');  
            }  
          }  
        });  
      } else if (res.platform == 'ios') {  
        // iOS设备  
        uni.invoke('canOpenURL', {  
          url: urlScheme,  
          success: function(res) {  
            if (res.result) {  
              // 可以跳转，说明已经安装了高德地图  
              console.log('已安装高德地图');  
            } else {  
              // 无法跳转，说明没有安装高德地图  
              console.log('未安装高德地图');  
            }  
          }  
        });  
      }  
    }  
  });  
}

第一步：在html中引入高德地图JS SDK，并在body中添加一个div容器：

<!-- 引入高德地图JS SDK -->  
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>  

<!-- 添加一个div容器 -->  
<div id="map"></div>

第二步：在Vue组件中，使用mounted钩子函数，创建一个地图实例并判断是否成功：

mounted() {  
  // 创建地图实例  
  const map = new AMap.Map('map', {  
    center: [116.397428, 39.90923],  
    zoom: 13  
  });  

  // 判断是否成功  
  if (typeof(map) !== 'object') {  
    console.log('未安装高德地图');  
  } else {  
    console.log('已安装高德地图');  
  }  
}

第三步：通过判断地图实例是否成功创建，就可以判断用户是否安装了高德地图了。