No.18可视化大屏--vite+vue3 添加高德地图

基于之前的可视化项目，优化地图模块。

1. 新建mapcontainer.vuewen文件，并在modelThird.vue 中引入和挂载

 2.安装Loader 

npm i @amap/amap-jsapi-loader --save

　　

 3.在mapcontainer.vue 中写入代码

<script setup>
import { onMounted, onUnmounted } from "vue";
// onMounted: Vue 生命周期钩子，当组件挂载后自动执行
// onUnmounted: 当组件卸载时自动执行，用来做清理。
import AMapLoader from "@amap/amap-jsapi-loader";
// AMapLoader: 用于动态加载高德地图 JavaScript API

let map = null;

onMounted(() => {
  // 安全码配置，密钥   
  window._AMapSecurityConfig = {
    securityJsCode: "ee0136064796e038160b3",
  };

  AMapLoader.load({
    key: "5d2572a613600fb64", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("container", {         //创建一个地图实例，挂载在 ID 为 "container" 的 DOM 上。
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 8, // 初始化地图级别
        center: [109.7, 19.2], // 初始化地图中心点位置(海南)
      });
    })
    .catch((e) => {
      console.log(e);
    });
});


//地图的清理
onUnmounted(() => {
  map?.destroy();
});
</script>

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

<style scoped>
#container {
  width: 98%;
  height: 450px;
  margin-right: 5px;
  margin-left: -5px;
  margin-top: 40px;
}
</style>

　效果：

 

　

二、更改网页图标和名字

 1.在阿里巴巴图标网下载想要的图标，保存为svg文件，放到public 文件夹下，并在index.html 文件中替换。

 

效果：