APP内的网页怎么调起地图导航服务

Question

做的H5放在安卓和IOS的APP的webview中，怎么调起百度地图或高德的导航服务？

Answer 1

使用scheme打开即可，app接受到scheme请求后需要特殊处理。

    if (OS === 'iOS') {
      Array.prototype.push.apply(buttons, [
        {
          text: '苹果地图',
          onClick: () => {
            Helper.openScheme(
              `http://maps.apple.com/?sll=${lat},${lon}&address=${name}`
            );
          }
        },
        {
          text: '高德地图',
          onClick: () => {
            Helper.openScheme(
              `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${lat}&lon=${lon}&dev=1`
            );
          }
        },
        {
          text: '百度地图',
          onClick: () => {
            Helper.openScheme(
              `baidumap://map/marker?location=${lat},${lon}&title=${name}&src=webapp.marker.yourCompanyName.yourAppName`
            );
          }
        },
        {
          text: '腾讯地图',
          onClick: () => {
            Helper.openScheme(
              `qqmap://map/marker?marker=coord:${lat},${lon};title:${name}&referer=myapp`
            );
          }
        }
      ]);
    } else if (OS === 'Android') {
      Array.prototype.push.apply(buttons, [
        {
          text: '高德地图',
          onClick: () => {
            Helper.openScheme(
              `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${lat}&lon=${lon}&dev=1`
            );
          }
        },
        {
          text: '百度地图',
          onClick: () => {
            Helper.openScheme(
              `bdapp://map/marker?location=${lat},${lon}&title=${name}`
            );
          }
        },
        {
          text: '腾讯地图',
          onClick: () => {
            Helper.openScheme(
              `qqmap://map/marker?marker=coord:${lat},${lon};title:${name}&referer=myapp`
            );
          }
        }
      ]);
    }

Answer 2

js可以调起手机上安装的APP，H5使用百度地图就会调起百度地图APP，使用的高德地图就会调起高德地图APP，应该都是URI API
百度：http://lbsyun.baidu.com/index...
高德：http://lbs.amap.com/api/uri-a...
不知道是不是题主要的~

Answer 3

webView处理点击打开本地地图app的操作，然后在操作中打开本地的地图应用，这种应用肯定是可以用个uri的形式打开

Answer 4

你说的问题感觉有点小歧义，调地图导航服务是指在 webView 中导航还是直接跳转到地图app。一楼回答的应该是第一种情况，二楼应该是第二种情况。

Answer 5

最快的方法用第三方地图，跳转过去。或者如果没有什么特别需求的话直接用网页端完成地图服务更舒服一点。webView再在里面直接加载地图很麻烦，尽量不要。

Answer 6

webview里面处理点击吊起地图app，scheme可以。intent跳转找到百度或者高德的packageName.应该也可以跳转

Answer 7

高德地图和百度地图可以用scheme调起地图，具体可参考API，里面讲的很清楚，配置好相应的Schema之后根据例子使用就好了。
百度：http://lbsyun.baidu.com/index...
高德： http://lbs.amap.com/api/uri-a...

两者都支持用H5通过URL调起或者通过原生调起，我之前的做法是原生写好调用的方法，然后开放接口给H5调用。

一下是我调起地图的Android代码，IOS也类似。仅供参考：

    @JavascriptInterface
    public void openMap(final String address) {
        Log.i("WebView", "OpenMap");
        webview.post(new Runnable() {
            @Override
            public void run() {
                String url = "";
                if (isAppInstalled(context, "com.autonavi.minimap")) {
                    url = "amapuri://poi?sourceApplication=ewpower.com&keywords="+address;
                    showToast("启动高德地图");
                }else if (isAppInstalled(context, "com.baidu.BaiduMap")) {
                    url = "baidumap://map/geocoder?src=openApiDemo&address="+address;
                    showToast("启动百度地图");
                } else {
                    showToast("检测到您未安装地图APP，无法开始导航，建议您安装最新版的高德地图或百度地图");
                    return;
                }

                Intent intent = new Intent();
                intent.setAction(Intent.ACTION_VIEW);
                intent.addCategory(Intent.CATEGORY_DEFAULT);

                //将功能Scheme以URI的方式传入data
                Uri uri = Uri.parse(url);
                intent.setData(uri);

                //启动该页面即可
                context.startActivity(intent);
            }
        });
    }