vue3项目使用第三方地图

最近发现一个功能很强第三方地图维智地图，示例效果很多，代码也很好理解，准备出一系列项目中常用的效果实战教程。本期内容为初始化地图教程，是后续教程的铺垫。

申请地图key

lothub.newayz.com/，这是它们对公业务的官网；location-dev.newayz.com/aimap-gl-v2…，这是开发文档。

lotboard.newayz.com/，这是它们的开放平台，和高德百度控制台差不多，注册账号，申请个应用就能用了，这里的key就是我们要的。

初始化vue项目

我这里选用vue3，仅做参考

vue create vue3-aimap创建项目，精简项目，初始化样式，这里不再赘述。

引入地图资源

在public/index.html头部插入如下资源

<link rel="stylesheet" href="https://location-dev.newayz.com/aimap-gl-js/v2.6.0/aimap-gl.css"/>
<script src="https://location-dev.newayz.com/aimap-gl-js/v2.6.0/aimap-gl.js"></script>

初始化MyMap组件

注意更换key

<template>
  <div id="map">map</div>
</template>

<script setup>
import { ref, onMounted } from "vue";
const { aimap } = window;
// 初始化key，复制自己应用的key即可
aimap.accessToken = "你的应用key";
const map = ref();
function initMap() {
  map.value = new aimap.Map({
    container: "map",
    center: [121.612846, 31.205494],
    zoom: 15,
    pitch: 0,
    minZoom: 1,
    maxZoom: 20,
    style: "aimap://styles/aimap/darkblue-v4",
  });
}
onMounted(() => {
  initMap();
});
</script>

<style scoped>
#map {
  height: 100%;
  width: 100%;
}
</style>

在App组件中引用MyMap组件

<template>
  <MyMap />
</template>

<script>
import MyMap from "./components/MyMap.vue";
export default {
  name: "App",
  components: {
    MyMap,
  },
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}
</style>

整体代码结构

如有问题，欢迎在评论区交流。