HERE MAP API - Part1 Basemap Setup

Posted on In Disqus: Word count in article: 612 Reading time ≈ 2 mins.

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
2
3
4
5
6
7
8
WhoWantsIceCream
|--base_map_set_up.html
|--scripts
	|--app.js
|--images
	|--icecream.svg
|--styles
	|--main.css

2. 设计页面

HTML 的 head 中引用 HERE Map JS API 以及必要的 CSS；

1
2
3
4
5
6
7
8
9
10
11
<title> Who Want's Icecream ? </title>

<!-- HERE Javascript SDK modules -->
<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" charset="UTF-8" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

<!-- Styles -->
<link rel="stylesheet" href="styles/main.css">

HTML的 body 中需要至少包含一个div ，用于作为 地图显示的容器； 以及引用js来完成 map 的规定动作。

1
2
3
4
5
<!-- Container for the map -->
<div id="map-container" class="map"></div>
<!-- Scripts -->
<script src="scripts/app.js"></script>

3. 交互式地图底图

增加如下内容到 app.js

1 从HERE Developer 网站申请账号，获取 APPID 和 APPCODE ，在初始化服务时使用。

1
2
3
4
5
6
7
8
// Get Map Container Element
var mapContainer = document.getElementById('map-container');

// Specify the APPID & APPCODE
var platform = new H.service.Platform({
  app_id: 'oyNWTb---PMlrXxCH', // // <-- ENTER YOUR APP ID HERE
  app_code: '_W_7qfgp-----tQQKkbLA', // <-- ENTER YOUR APP CODE HERE
});

2 创建 Map 对象，并指定初始化时的位置、显示级别、底图样式…… everything as you wish……

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// ----------------------------------------------------------------------- 
// Displaying a Basic Map， Initialize Map Object
// Create Defaulr Layer
var defaultLayers = platform.createDefaultLayers();

// Adjust the Map Center and the Initial Zoom Level 
var coordinates = {
  lat: 52.530974, // HERE HQ in Berlin, Germany
  lng: 13.384944
};
var mapOptions = {
  center: coordinates,
  zoom: 14
}
var map = new H.Map(
  mapContainer,
  defaultLayers.normal.map,
  mapOptions);

3 让地图动起来，至少可以平移缩放，很简单的一段即可。

1
2
3
// ----------------------------------------------------------------------- 
// Interacting with the map, at least move around and zoom in / out
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

4 给地图中心加个图标， 换成一个自定义的也成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// -----------------------------------------------------------------------
// Adding Markers to the Map
var marker = new H.map.Marker(coordinates);

// Custom Icons for Markers
var iconUrl = './images/icecream.svg';

var iconOptions = {
	// The icon's size in pixel:
  size: new H.math.Size(26, 34),
	// The anchorage point in pixel, 
	// defaults to bottom-center
  anchor: new H.math.Point(14, 34)
};

var markerOptions = {
   icon: new H.map.Icon(iconUrl, iconOptions)
};

var marker = new H.map.Marker(coordinates, markerOptions);
map.addObject(marker);

TIPS 加个监听，可以在你改变窗口尺寸的时候，自动更新地图的尺寸。

1
2
3
4
5
// ----------------------------------------------------------------------- 
// Set Event Listener to Make Map React Properly
window.addEventListener('resize', function () {
  map.getViewPort().resize();
});

这就完成 Interactive Basemap 了，Have fun！

original resource Part1: Basic Map Set-up

complete code Github - kikitaMoon/HERE_JS_Who_Wants_Icecream