前言
地图功能再常见不过, 技术也很成熟,对于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 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实现语音导航功能。
这里同样有两种实现方式:
- 通过原生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 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")