混合移動應用中地圖導航功能開發與應用

前言

地圖功能再常見不過， 技術也很成熟，對於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 MyApp

cd MyApp

cordova platform add ios

cordova 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")