vue2项目中引入高德地图--1 简单应用

1.首先我们需要进入到高德地图的官方网站申请一个key和密钥 ，创建一个项目--首页 | 高德控制台

2.安装高德地图的包 --npm i @amap/amap-jsapi-loader --save
3.新建一个放地图的vue组件

4.具体代码如图

ps：附上代码片段
 

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

<script>
import AMapLoader from "@amap/amap-jsapi-loader"; // 按需引入依赖
// import { on } from "events";
window._AMapSecurityConfig = {
  securityJsCode:"3668f3fbb7ef0add9687dbc9c173****", // 安全密钥
};
export default {
  data() {
    return {
      map: null,
      mouseTool : null,
      overlays : [],
      auto : null,
      placeSearch : null, 
    };
  },
  mounted(){
   this.initMap()
  },
  methods: {
    // 初始化地图1
    // initMap() {
    //   AMapLoader.load({
    //     key:"4c1333a4be7bf72c5b683df714e3****", //key值是key值 和安全密钥不同
    //     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: ['AMap.ToolBar'