vue使用Here地图

在 Vue 中使用 HERE 地图需要进行以下步骤：

1. 在 index.html 文件中引入 HERE 地图的 JavaScript API。

<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 生命周期中初始化地图。

<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. 在地图中添加标记和其他图层等。

<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 中的定价页面。