混合移动应用中地图导航功能开发与应用

前言

地图功能再常见不过， 技术也很成熟，对于native的时间方案，有很多，我们可以使用高德地图sdk, 腾讯地图sdk, 百度地图sdk。

但是混合移动应用中，改如何实现呢？下面我们以百度地图为例。

可以实现的几种方案

大概有一下两种方案可选：

1. 编写地图插件，进行插件调用，但显示地图为native view.(实现起来比较麻烦)
2. 调用JS library, 实现地图功能，但是功能相对匮乏，有特殊需要还需要调用native sdk， 比如语音导航功能，当然是可以实现的。（实现较为简单，满足需求）

以上两种方案，按需求而定，没有定论，下面就一js library为例，做一个简单的展示，实现平台，百度地图。

注册应用，获取api key

首先我们要有一个百度账户，自行注册就好了。

登陆http://lbsyun.baidu.com/apiconsole/key

创建一个新的App:

点击“创建应用按钮”, 出现如下界面：

有以下几点需要注意：

应用类型： 选择服务器端。

白名单：填* (因为我们的html文件在客户端生成)

然后提交，会看到一个api key, 之后会用到。

创建一个Cordova的项目

cordova create MyApp com.delawareconsulting.myapp MyAppcd MyAppcordova platform add ioscordova platform add android

编辑地图代码

页面html：

<div id="allmap"></div>    <div id="driving_way">        <select>            <option value="0">最少时间</option>            <option value="1">最短距离</option>            <option value="2">避开高速</option>        </select>        <input type="button" id="result" value="查询"/>        <a href="baidumap://map/geocoder?address=上海浦东国际机场&src=YourAppName">地理编码</a>    </div>    <div id="r-result"></div>

为了方便我们引入jquery：

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

地图JS代码：

<script type="text/javascript">    //百度地图API功能    function loadJScript() {        var script = document.createElement("script");        script.type = "text/javascript";        script.src = "http://api.map.baidu.com/api?v=2.0&ak=yourAPIKey&callback=init";        document.body.appendChild(script);    }    function init() {        var map = new BMap.Map("allmap");            // 创建Map实例        var start = "哈尔滨";        var end = "百度大厦";        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);        //三种驾车策略：最少时间，最短距离，避开高速        var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME,BMAP_DRIVING_POLICY_LEAST_DISTANCE,BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];        $("#result").click(function(){            map.clearOverlays();            var i=$("#driving_way select").val();            search(start,end,routePolicy[i]);            function search(start,end,route){                var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},policy: route});                driving.search(start,end);            }        });              //启用滚轮放大缩小    }    window.onload = loadJScript;  //异步加载地图</script>

需要注意的是，这里我们需要替换成自己的api key.

再次运行的我们项目会看到如下界面：

配置cordova项目实现导航功能

对于位置标记，绘制路线图，JSAPI都可以完美实现，但是如果想实现语音导航功能，将要不得不调用原生应用，下面来说下如何调用百度app实现语音导航功能。

这里同样有两种实现方式：

1. 通过原生api实现调用
2. 通过 a 标签调用

两种实现方式都可以，这里我们以JS为例，不同平台代码是不同的，得区分对待，看一下代码：

android 平台启动：

//网页应用调起Android百度地图方式举例<a href="bdapp://map/marker?location=40.047669,116.313082&title=我的位置&content=百度奎科大厦&src=yourAppName">地图标点</a>

IOS平台启动：

<a href="baidumap://map/geocoder?address=上海浦东国际机场&src=AcerDemo">地理编码</a>

到这里，如果你运行项目，并不能如愿打开app, 因为在cordova平台我们需要配置allow-intent.

看代码：

//ios<allow-intent href="baidumap://*/*" />//android<allow-intent href="bdapp://*/*" />

我们再次运行，点击地理编码按钮，会看到：

这里建议，如果您的百度地图app是刚下载的，建议先打开授权一下网络访问权限，否则在调用的时候回查不到信息。

检查应用是否存在

很多时候用户手机并没有安装百度地图，如果用户点击会没有反应，这里建议先检查一下百度地图app是否存在，在进行调用，相关方案如下：

添加检查插件：

cordova plugin add cordova-plugin-appavailability

实现代码：

var scheme;// Don't forget to add the cordova-plugin-device plugin for `device.platform`if(device.platform === 'iOS') {    scheme = 'baidumap://';}else if(device.platform === 'Android') {    scheme = 'com.baidu.BaiduMap';}appAvailability.check(    scheme,       // URI Scheme or Package Name    function() {  // Success callback        console.log(scheme + ' is available :)');    },    function() {  // Error callback        console.log(scheme + ' is not available :(');    });

对于ios9+需要配置白名单，否则检车无效：

<key>LSApplicationQueriesSchemes</key>      <array>          <string>baidumap</string>      </array>

打开store下载百度地图：

IOS:

window.open("https://itunes.apple.com/cn/app/id452186370")

Android:

window.open("market://search?q=com.baidu.BaiduMap")