HERE MAP API系列文章Part1 - Basemap Setup

HERE 官网有一个很有趣的Tutorial, Who wants ice cream !?
如果你注册了HERE Developer 帐号,很可能会看到这个教学的小广告,不晓得你是否也跟着做了一遍?
假设你是冰淇淋店的老板,那麽用HERE Map 做个交互式的地图小网页,边测试边记录

準备资料
準备如下结构的目录和文件
http://img2.58codes.com/2024/20129797PHqT3H9lbY.jpg设计页面
HTML 的 head 中引用 HERE Map JS API 以及必要的 CSS;
http://img2.58codes.com/2024/20129797fkW5npNGeO.jpg
HTML的 body 中需要至少包含一个div ,用于作为地图显示的容器; 以及引用js来完成 map 的规定动作。
http://img2.58codes.com/2024/20129797V2Fwbjsc1U.jpg交互式地图底图
a. 从HERE Developer 网站申请帐号,获取 APPID 和 APPCODE ,在初始化服务时使用
http://img2.58codes.com/2024/20129797LtDNKRU5LG.jpg
b. 创建 Map 对象,并指定初始化时的位置、显示级别、底图样式…… everything as you wish……
http://img2.58codes.com/2024/20129797jrnDYMW07H.jpg
c. 让地图动起来,至少可以平移缩放,很简单的一段即可
http://img2.58codes.com/2024/20129797BwwSHscci7.jpg给地图中心加个图标, 换成一个自定义的也成
http://img2.58codes.com/2024/20129797we1AcFDXNi.jpg
TIPS 加个event listener可以在你改变窗口尺寸的时候,自动更新地图的尺寸
http://img2.58codes.com/2024/20129797x3zJjh6481.jpg

original resource Part1: Basic Map Set-up
complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream
•作者: Xiaoyan Mu
•部落格连结: https://www.kikitamap.com/2019/03/05/Icecream_Part1_Basemap_Setup/
•着作权: The author owns the copyright, please indicate the source reproduced.


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章