给个人网站加上高德地图插件

1、前言

在修改个人网站的关于界面的时候，突然想起之前有看过高德地图的插件，而关于界面刚好可以将个人地址设置为地图图层的形式，所以找到了高德地图的插件，进行设置。

2、API设置

首先我们要进入高德开放平台的地址
然后会显示以下的选项

选择左上角的地图 JS API
即出现以下内容：

这是官方文档所写的方式，大家可以根据官方的文档进行操作，基本都能很简单实现。

2.1、安装Loader

官方的方式，首先我们要下载Loader
npm i @amap/amap-jsapi-loader --save

2.2、编辑vue文件

首先我们可以创建一个vue文件，单独放置我们的地图插件。
然后创建一个div组件，并设置地图容器的 id 属性为 container。

1
2
3

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

然后可以设置地图的css格式：

<style  scoped>
    #container{
        padding:0px;
        margin: 0px;
        width: 100%;
        height: 800px;
    }
</style>

最后我们在这个vue组件中引入 amap-jsapi-loader

1	import AMapLoader from '@amap/amap-jsapi-loader';

2.3、初始化map对象

本次我所使用的是 vue3，和 vue2 还是有语法上的一些差异的，这里我们先介绍 vue3 的用法。
首先需要引入 Vue3 的 shallowRef 方法（使用 shallowRef 进行非深度监听，因为在 Vue3 所使用的 Proxy 拦截操作会改变 JSAPI 原生对象，所以此处需要区别 Vue2 使用方式对地图对象行非深度监听，否则会出现问题，建议 JS API 相关对象采用非响应式的普通对象来存储）

1	import { shallowRef } from '@vue/reactivity'

然后我们在 setup 中声明 map 对象：

setup(){
  const map = shallowRef(null);
    return{
       map,
    }
},

vue2中初始化map对象
仅需要以下这一句

data(){
      return{
        map:null,
     } 
 },

2.4、初始化函数 initMap

methods:{
    initMap(){
        AMapLoader.load({
            key:"",             // 申请好的Web端开发者Key，首次调用 load 时必填
            version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        }).then((AMap)=>{
            this.map = new AMap.Map("container",{  //设置地图容器id
                viewMode:"3D",    //是否为3D地图模式
                zoom:5,           //初始化地图级别
                center:[105.602725,37.076636], //初始化地图中心点位置
            });
        }).catch(e=>{
            console.log(e);
        })
    },
},

最后就是调用初始化函数

mounted(){
    //DOM初始化完成进行地图初始化
    this.initMap();
}

3、我所使用的代码

我所使用的与官方的不太相同，没有官方这么复杂

首先我还是定义一个 div 容器用来存放地图组件

1	<div id="container" :class="ismoblie==true?'map1':'map2'">

然后在我们的页面加载完毕之后，立即异步加载我们的地图，这就要用到 vue3 的生命周期函数中的onMounted。

根据官方的方式进行改进，就有我以下代码的方式来实现，具体用途都写上了注释。
这样子与官方的同样，可以生成一个地图组件

完整的代码如下

onMounted(()=>{
      //页面加载完,开始异步引入高德地图
      //创建了一个回调函数,高德地图加载完毕会调用
      window.onLoad = function () {
        // 所有关于地图的逻辑全部都要写在这个回调里面
        // 保证高德地图加载完毕
        // var map = new AMap.Map("container");
        // 地图中心点
        var map = new AMap.Map("container", {
          zoom: 16, //级别
          center: [110.417813,25.31373], //中心点坐标
          viewMode: "3D", //使用3D视图
        });
      };
      // key是申请的值
      var url =
          "https://webapi.amap.com/maps?v=1.4.15&key=d6c8f397b0da87524290b6622de498f5&callback=onLoad";
      //创建一个 script dom元素
      // doc需要补全document
      var jsapi = document.createElement("script");
      //设定script标签属性
      jsapi.charset = "utf-8";
      jsapi.src = url;
      //将API文件引入页面中,加载完毕以后会调用函数
      document.head.appendChild(jsapi);
    })