如何运用HERE JavaScript快速建立前端的网页显示地图-58码农网

介绍

HERE Maps API for JavaScript提供一套完整的程序接口，帮助开发者快速开发显示地图或位置讯息的前端网页。
更多的细节与内容，请参考HERE Developer (https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/index.html)

步骤

1. 取得HERE服务的凭证：
首先，开发者需在HERE Developer网页注册帐户，而后自己的需求选则计画，推荐您可以首先选择Freemium的计画(免费提供开发者一个月250K的传输量）。
注册完成后，于网页右上角点选使用者并进入Project后，即可立即产生一组JS的凭证，在后续调用HERE的服务会需要用到API KEY的资讯。

**2. 载入HERE JS library : **
于HTML框架的中，载入以下的HERE JS library，

<!DOCTYPE html>    <head>      ...      <meta name="viewport" content="initial-scale=1.0,        width=device-width" />      <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-core-legacy.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-service-legacy.js"        type="text/javascript" charset="utf-8"></script>    </head>

3. 开发基于HERE地图的网页显示 :

初始HERE Platform服务,先建立变数platform并指定为启始H.service.Platform，在此载入前叙步骤获得的APIKEY，下一个步骤，建立地图的Layer，HERE在JS 3.1版本中，提供了Vector(向量)与Raster(网格)的资料格式。下方展示的程式片段码中，只需变更defaultLayers.vector.normal.map 为 defaultLayers.raster.normal.map，即可更改渲染的方式从HTML5 WebGL退回canvas 2D，以支援部分浏览器尚未支援WebGL。

// Create a Platform object:var platform = new H.service.Platform({  'apikey': '{YOUR_API_KEY}'});// Get an object containing the default map layers:var defaultLayers = platform.createDefaultLayers();// Instantiate the map using the vecor map with the// default style as the base layer:var map = new H.Map(    document.getElementById('mapContainer'),    defaultLayers.vector.normal.map,    {      zoom: 11,      center: { lat: 25.037975, lng: 121.5493 }    });

4. 动态地图显示 :
透过以上的方式，已经能使您的网页快速的加载HERE的静态地图显示。然而，网页的地图，动态的互动是必须的功能，HERE Maps JS 提供Event模组，快速的使网页地图产生动态互动。
首先，首先，您必须在步骤＃2的地方，加载mapsjs-ui.js

<script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"    type="text/javascript" charset="utf-8"></script

然后，于步骤＃3的程序码之后，创建Event模组。

    // Enable the event system on the map instance:    var mapEvents = new H.mapevents.MapEvents(map);    // Add event listener:    map.addEventListener('tap', function(evt) {        // Log 'tap' and 'mouse' events:        console.log(evt.type, evt.currentPointer.type);    });    // Instantiate the default behavior, providing the mapEvents object:     var behavior = new H.mapevents.Behavior(mapEvents);

5. UI 套件 :

此外，若希望在网页上，快速的加入地图控制功能，例如：图面缩放或地图样式的更改，可加入HERE的JS UI模组，
首先，您必须在步骤＃2的地方，加载apsjs-events.js

<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"            type="text/javascript" charset="utf-8"></script>

然后，于步骤＃3的程序码之后，创建UI模组。

// Create the default UI:    var ui = H.ui.UI.createDefault(map, defaultLayers);

5. 地图显示：
现在您，即可立即于网页浏览器体验HERE MAP。

完整CODEBASE：

<html><head>    ...    <meta name="viewport" content="initial-scale=1.0,        width=device-width" />    <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-core-legacy.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-service-legacy.js" type="text/javascript" charset="utf-8"></script>    <script src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.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" /></head><body>    <div style="width: 100%; height: 500px" id="mapContainer"></div>    <script>    // Create a Platform object:    var platform = new H.service.Platform({        'apikey': '[your apikey]'    });    // Get an object containing the default map layers:    var defaultLayers = platform.createDefaultLayers();    // Instantiate the map using the vecor map with the    // default style as the base layer:    var map = new H.Map(        document.getElementById('mapContainer'),        defaultLayers.vector.normal.map, {            zoom: 15,            center: { lat: 25.037975, lng: 121.5493 }        });    // Enable the event system on the map instance:    var mapEvents = new H.mapevents.MapEvents(map);    // Add event listener:    map.addEventListener('tap', function(evt) {        // Log 'tap' and 'mouse' events:        console.log(evt.type, evt.currentPointer.type);    });    // Instantiate the default behavior, providing the mapEvents object:     var behavior = new H.mapevents.Behavior(mapEvents);    // Create the default UI:     var ui = H.ui.UI.createDefault(map, defaultLayers, 'zh-CN')    </script></body></html>

介绍

步骤

给这篇文章的作者打赏

关于作者: 网站小编

相关文章

HBO Max vs.Netflix：当你负担不起两者时如何选择

课内笔记整理---作业系统实务(资安相关篇)

excel vba捞网页数据问题

热门文章

1如何运用HERE JavaScript快速建立前端的网页显示地图

2[鼠年全马] W31 - Vue出一个旅馆预约平台(5)

3MySQL WHERE相关基本操作

4MySQL CRUD基本操作

5互联网行业中，常说的API和SDK是什么？