vue 实现地图创建(高德地图)

在vue 项目中，通过代码实现地图的创建

首先引入js文件

import {
    initMap
  } from '../../../../utils/map.js'

map.js文件如下：

/* 引入下载的插件 */
import AMapLoader from "@amap/amap-jsapi-loader";
//抛出initMap初始化方法
export const initMap = () =>
  AMapLoader.load({
    key: "**********", // 申请好的Web端开发者Key，
    /* 首次调用 load 时必填 */
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [
      "AMap.PolygonEditor",
      "AMap.MoveAnimation",
      "AMap.PlaceSearch",
      "AMap.AutoComplete",
      "AMap.Geocoder"
    ],
  });

vue 文件

    <div class="map" id="bassMap"></div>

    handleInitMap() {
      initMap().then(async (Amap) => {
        let map = new Amap.Map("bassMap", {
          //地图容器id与盒子id一致
          viewMode: "3D", //是否为3D地图模式
          zoom: 15, //初始缩放比例
          center: [98.51, 39.75], //中心点位置
        })
        let icon = new Amap.Icon({
          // 图标尺寸
          size: new Amap.Size(33, 50),
          // 图标的取图地址
          image: require('../../../../assets/images/address_mark.png'),
          // 图标所用图片大小
          imageSize: new Amap.Size(33, 50),
        })
        var location = this.qyInfo.eiCoordinate;
        if (location == null) {
          return
        }
        var lnglat = location.split(',');
        map.setCenter(lnglat); //设置地图中心点
        let marker = new Amap.Marker({
          position: lnglat,
          icon: icon,
          offset: new AMap.Pixel(0, 0) //设置偏移量
        });
        map.add(marker);
      })
    }