小白终成大白2

工作笔记

前言

使用高德地图设置一个标记点
参照高德开放平台
地图相关api的官网
https://lbs.amap.com/api/javascript-api-v2/getting-started

一、场景

在vue2项目中插入地图
并添加一个标记点
点击标记点弹出弹窗

点击标记点弹出信息框图示

二、使用步骤

1.安装 amap/amap-jsapi-loader

代码如下（示例）：

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

2.添加一个div容器 用于生成地图在里面

代码如下（示例）：

 <div id="mapContainer" style="width: 96%; height: 85%;"></div> //可加样式调整大小

3.导入 声明

代码如下（示例）：

导入

import AMapLoader from "@amap/amap-jsapi-loader";

需要声明的变量

 data() {
    return {
      map: null,//地图对象
      marker: null,//标记对象
      loaded: false,
      infoWindow: null,//弹窗对象
    };
  },

4.新增一个地图对象,增加标记点,点击标记点弹出窗口

代码如下（示例）：

 mounted() {
  this.initMap();//加载地图
  },
 methods: {
 	async initMap() {
      await AMapLoader.load({
        key: "6103f2a70f153fdf02e*******2559ed", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Marker", "AMap.InfoWindow"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        callback: "onAPILoaded",//回调函数
      });

      this.map = new window.AMap.Map("mapContainer", {//生成底图在mapContainer这个div里
        center: [120.230349, 30.228173], // 初始中心点坐标
        zoom: 13, // 初始缩放级别
      });

      this.addMarker();//添加标记点的方法
    },
    
    addMarker() {
      this.marker = new window.AMap.Marker({//新增一个标记点
        position: [120.230349, 30.228173],
      });
      this.marker.setMap(this.map); //放在map这个对象里面
      //顺便新增一个点击标记点出来的窗口
      this.infoWindow = new window.AMap.InfoWindow({//新增一个window窗口
        content: "奥体中心", // 添加你想要显示的文字描述
        offset: new window.AMap.Pixel(0, -30), // 设置信息窗体偏移量，使其显示在标记点正上方
      });

      // 点击标记点时显示信息窗体
      this.marker.on("click", () => {
        this.infoWindow.open(this.map, this.marker.getPosition());
      });
    },
    /** 回调函数 地图渲染好时触发 不需要可以删掉 */
    onAPILoaded() {
      this.loaded = true;
      console.log("执行对地图的其他操作");
      // 在这里可以执行其他与地图相关的操作
    },
 }

备注

开发中报错 禁止多种api加载方式混用
可能是由于当时还导入了vue-amap 想用这种方式引入地图没成功 后来去掉了vue-amap还是报错

解决办法是 在加载地图前加一个reset方法

代码如下（示例）：

 mounted() {
 AMapLoader.reset();//在加载地图前加一个reset方法 解决报错
  this.initMap();//加载地图
  },