HERE MAP API - Part1 Basemap Setup
Contents
Quick Start for HERE Map Javascript API
HERE 官网有一个很有趣的Tutorial, Who wants ice cream !?
如果你注册了HERE Developer 账号,很可能会被推送到这个教程的小广告。
假设你是冰激凌店的老板,那么用HERE Map 做个交互式的地图小网页,边测试边记录。
Let’s get our hands dirty……
1. 准备资源
准备如下结构的目录和文件:
1 | WhoWantsIceCream |
2. 设计页面
HTML 的 head
中引用 HERE Map JS API 以及必要的 CSS;
1 | <title> Who Want's Icecream ? </title> |
HTML的 body
中需要至少包含一个div
,用于作为 地图显示的容器; 以及引用js
来完成 map 的规定动作。
1 | <!-- Container for the map --> |
3. 交互式地图底图
增加如下内容到 app.js
1 从HERE Developer 网站申请账号,获取 APPID 和 APPCODE ,在初始化服务时使用。
1 | // Get Map Container Element |
2 创建 Map 对象,并指定初始化时的位置、显示级别、底图样式…… everything as you wish……
1 | // ----------------------------------------------------------------------- |
3 让地图动起来,至少可以平移缩放,很简单的一段即可。
1 | // ----------------------------------------------------------------------- |
4 给地图中心加个图标, 换成一个自定义的也成。
1 | // ----------------------------------------------------------------------- |
TIPS 加个监听,可以在你改变窗口尺寸的时候,自动更新地图的尺寸。
1 | // ----------------------------------------------------------------------- |
这就完成 Interactive Basemap 了,Have fun!
original resource Part1: Basic Map Set-up
complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream
- Blog Link: https://www.kikitamap.com/2019/03/05/Icecream_Part1_Basemap_Setup/
- Copyright Declaration: The author owns the copyright, please indicate the source reproduced.
Share