[原创] 海外地图服务Here Map在Android 端的使用介绍

在这里插入图片描述

前言

在这里插入图片描述

说起导航地图,无论是在手机移动端还是在车机端,国内的车主肯定使用得最多的无疑是高德和百度,高德一直深耕定位和导航功能,百度则在O2O领域布局已久,在百度地图里面可以看到等多的周边商家服务。在车载前装导航领域,国内汽车制造商似乎并不准备将这块蛋糕拱手交给像高德、百度、谷歌这样的第三方服务商,毕竟地图作为基础能力,在智能驾驶、自动驾驶和移动互联网服务等方面都有着极为重要的作用,汽车制造商更希望拥有自主地图服务。这也是为什么宝马、奥迪和戴姆勒组成的财团,会斥巨资收购海外地图数据公司Here的原因。

在这里插入图片描述

HERE Technologies原本是诺基亚旗下的海外地图数据供应商,被宝马奥迪和戴姆勒联合收购以后也在试图进入中国这个全球最大的汽车消费国,包括和四图维新合作完善中国的地图数据和动态信息,提升在自动驾驶领域的研发进度,近两年也越来越开放,去年开始和高德合作帮助后者完善海外的地图数据。

在这里插入图片描述

我在之前的文章 仿滴滴出行打车APP界面 增加RFID认证、海外版、司机证件号码识别功能提到了国内手机在谷歌地图被阉割的情况下,拿到国外如何使用的问题。很多国外开发的应用落地中国也需要招聘人员负责地图和定位模块的本地化工作。这里就介绍一下 Here地图在Android应用上的集成,我前东家的德国开发同事对Here地图的实用性评价还是非常高的。

这里先看一下整体的效果:

在这里插入图片描述
下面这个是加上卫星地图一起显示的效果:
在这里插入图片描述

在这里插入图片描述
卫星地图模式很像Google Earth.
在这里插入图片描述

下面进入主题,先介绍一下 Here地图的SDK:

1. Here地图Android SDK几个版本对比

Here地图服务对开发者开放下下面几种不同的版本:

  1. Lite Edition: 这个是精简版SDS,主要是给低ROM和比较差的渲染能力的手机型号使用,考虑到当前手机更新换代的频率,非常不建议开发者使用Lite版本。
  2. Explore Edition: 这个版本非常适合非付费开发者体验Here服务,它可以提供多个MapView 实例,具备3D镜头,也允许开发者设置不同Map层级的绘制顺序,或者为MapView定制不同地图组件。我们下面的实例就使用的 Explore Edition。
  3. Navigate Edition: 相比上面介绍的Explore Edition,这个版本增加了 turn-by-turn navigation功能,也就是针对每一个路口,都会提供专门的转向提示,更适合真实驾驶环境中使用。
  4. Premium Edition: 这个是功能最丰富的版本,增加了Here地图非常骄傲的离线导航和离线路径规划功能,也提供了专门针对卡车,私家车和行人步行的导航模块,也有高速费用计算,限速,坡度弯道曲率这些更深维度的数据。

国内的开发者也可以去我的GitHub上去下载 Explore版本的Android SDK:SDK下载地址

2. 申请Here地图服务的 Credentials key

  1. 就像国内的高德地图和百度地图SDK一样,选
  • 28
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
在 Vue 中使用 HERE 地图需要进行以下步骤: 1. 在 index.html 文件中引入 HERE 地图的 JavaScript API。 ```html <script src="https://js.api.here.com/v3/3.1/mapsjs-core.js" type="text/javascript" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-service.js" type="text/javascript" charset="utf-8"></script> <script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /> ``` 2. 在 Vue 组件中创建地图容器,并在 mounted 生命周期中初始化地图。 ```html <template> <div class="map-container"> <div id="here-map" style="width: 100%; height: 100%;"></div> </div> </template> <script> export default { mounted() { const platform = new H.service.Platform({ apikey: "YOUR_API_KEY", }); const defaultLayers = platform.createDefaultLayers(); const map = new H.Map( document.getElementById("here-map"), defaultLayers.vector.normal.map, { center: { lat: 37.7749, lng: -122.4194 }, zoom: 10, } ); }, }; </script> <style> .map-container { width: 100%; height: 500px; } </style> ``` 其中,`YOUR_API_KEY` 是你在 HERE Developer Portal 中创建的 API key。 3. 在地图中添加标记和其他图层等。 ```html <template> <div class="map-container"> <div id="here-map" style="width: 100%; height: 100%;"></div> </div> </template> <script> export default { mounted() { const platform = new H.service.Platform({ apikey: "YOUR_API_KEY", }); const defaultLayers = platform.createDefaultLayers(); const map = new H.Map( document.getElementById("here-map"), defaultLayers.vector.normal.map, { center: { lat: 37.7749, lng: -122.4194 }, zoom: 10, } ); const marker = new H.map.Marker({ lat: 37.7749, lng: -122.4194 }); map.addObject(marker); }, }; </script> <style> .map-container { width: 100%; height: 500px; } </style> ``` 注意事项: 在使用 HERE 地图 API 时,需要在 HERE Developer Portal 中创建 API key。同时,HERE 地图 API 也需要付费,具体费用可以查看 HERE Developer Portal 中的定价页面。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值