vue使用Here地图
时间: 2023-08-01 12:07:11 浏览: 268
在 Vue 中使用 HERE 地图需要进行以下步骤:
1. 在 index.html 文件中引入 HERE 地图的 JavaScript API。
```html
<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-service.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" />
```
2. 在 Vue 组件中创建地图容器,并在 mounted 生命周期中初始化地图。
```html
<template>
<div class="map-container">
<div id="here-map" style="width: 100%; height: 100%;"></div>
</div>
</template>
<script>
export default {
mounted() {
const platform = new H.service.Platform({
apikey: "YOUR_API_KEY",
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById("here-map"),
defaultLayers.vector.normal.map,
{
center: { lat: 37.7749, lng: -122.4194 },
zoom: 10,
}
);
},
};
</script>
<style>
.map-container {
width: 100%;
height: 500px;
}
</style>
```
其中,`YOUR_API_KEY` 是你在 HERE Developer Portal 中创建的 API key。
3. 在地图中添加标记和其他图层等。
```html
<template>
<div class="map-container">
<div id="here-map" style="width: 100%; height: 100%;"></div>
</div>
</template>
<script>
export default {
mounted() {
const platform = new H.service.Platform({
apikey: "YOUR_API_KEY",
});
const defaultLayers = platform.createDefaultLayers();
const map = new H.Map(
document.getElementById("here-map"),
defaultLayers.vector.normal.map,
{
center: { lat: 37.7749, lng: -122.4194 },
zoom: 10,
}
);
const marker = new H.map.Marker({ lat: 37.7749, lng: -122.4194 });
map.addObject(marker);
},
};
</script>
<style>
.map-container {
width: 100%;
height: 500px;
}
</style>
```
注意事项:
在使用 HERE 地图 API 时,需要在 HERE Developer Portal 中创建 API key。同时,HERE 地图 API 也需要付费,具体费用可以查看 HERE Developer Portal 中的定价页面。
阅读全文