Vue
HTML
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.cit.api.here.com/v3/3.0/mapsjs-service.js"></script>
<div id="app">
</div>
Vue
new Vue({
el: "#app",
template: '<div style="width: 100%; height: 300px" id="mapContainer"></div>',
data: function() {
return {
map: null,
maptypes: null
}
},
mounted () {
this.initMap ();
},
methods: {
initMap() {
// Initialize the platform object:
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true,
useHTTPS: true
});
this.maptypes = platform.createDefaultLayers();
// Instantiate (and display) a map object:
this.map = new H.Map(
document.getElementById('mapContainer'),
this.maptypes.normal.map,
{
zoom: 10,
center: {lat:52.5159, lng:13.3777}
});
this.behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
}
}
})