前言

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

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

可以实现的几种方案

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

编写地图插件，进行插件调用，但显示地图为native view.(实现起来比较麻烦)
调用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实现语音导航功能。

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

通过原生api实现调用
通过 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 Namefunction() {  // Success callbackconsole.log(scheme + ' is available :)');},function() {  // Error callbackconsole.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")

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

基于STM 32、矩阵键盘和独立键盘实现LCD显示的智能计算器（带括号的加减乘除运算、混合四则运算）——普中科技单片机开发试验仪嵌入式开发
0 引言智能计算器是嵌入式开发的入门项目,本章使用STM 32芯片作为CPU,并将矩阵键盘和独立键盘作为输入外设,LCD1602作为显示屏,实现可输入的可视化智能计算器. 备注:最终生成的可执行HE ...
iOS开发那些事-iOS6苹果地图有用开发
在iOS 6之后,不再使用谷歌地图了,而是使用苹果自己的地图,可是API编程接口没有太大的变化.开发者不须要再学习非常多新东西就能开发地图应用,这是负责任的做法.因此本节介绍的内容也相同适用于iOS5 ...
Stealth-Persist混合内存系统中持久应用程序的体系结构支持
文章目录 crash-consistent applications 崩溃一致性程序摘要一.引言二.背景 A.新兴的非易失性存储器 B.混合主存储器(HMM) C.页面缓存策略 D. 目前的工业 ...
基于百度地图sdk的地图app开发（七）——导航和模拟导航
这是基于百度地图sdk的地图app开发系列博客第七篇代码仓库位置:https://github.com/YanhuiLu89/lmap.git 上一篇基于百度地图sdk的地图app开发(六)--路 ...
高德地图Amap开发实践
一.简介: 高德开放平台是国内技术领先的LBS(Location Based Services,基于位置的服务)服务提供商,拥有先进的数据融合技术和海量的数据处理能力.高德开放平台向广大开发者提供覆盖 ...
iOS开发那些事-iOS6苹果地图实用开发
在iOS 6之后,不再使用谷歌地图了,而是使用苹果自己的地图,但是API编程接口没有太大的变化.开发人员不需要再学习很多新东西就能开发地图应用,这是负责任的做法.因此本节介绍的内容也同样适用于iOS5 ...
百度地图应用开发（一）
百度地图应用开发(一) 最近对LBS比较感兴趣,在研究百度地图.先了解下百度地图的大概吧! http://dev.baidu.com/wiki/imap/index.php?title=Android ...
android 地图服务开发 INSTALL_FAILED_MISSING_SHARED_LIBRARY 错误解决
android 地图服务开发 INSTALL_FAILED_MISSING_SHARED_LIBRARY 错误解决地图服务开发中遇到此类错误大体分为以下两种情况解决:(论坛里大多都是属于第一种情况的 ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
读保护_混合ASIL系统中不同安全等级模块间的边界保护
01 功能安全组件的软件开发针对ISO 26262对功能安全软件研发的要求,AUTOSAR将功能安全需求进行了具体拆分.当前的AUTOSAR规范囊括了诸多功能安全组件软件开发的需求概念. 在AUTO ...

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

前言