高德地图的2种引入方式

方法一：使用amap-jsapi-loader 插件

步骤1.  npm安装插件  npm install @amap/amap-jsapi-loader --save

 步骤2. 创建地图组件

 vMap/index页面代码如下： 

      注意点：地图组件要有高度，否则无法显示

步骤3. 父组件页面使用vMap自定义地图组件

 方法二：使用script直接引入

步骤1. 在Public的inde.html文件的script中直接引入

 步骤2. 在config中配置

 configureWebpack: {
    externals: {
      AMap: "AMap"
    },
  },

 步骤3. 创建自定义地图组件

template>
  

步骤4. 父组件页面使用vMap自定义地图组件

 注意：init方法要放在mounted中，不然会提示 Error in created hook: "Error: Map container div not exist"创建挂钩时出错：“错误：映射容器div不存在”,同样div也需要高宽度

附带生成随机id方法：

/**
 * 生成uuid
 * @param len 长度 number
 * @param radix 随机数基数 number
 * @returns { string }
 */
 export const uuid = (len = 16, radix = 62) => {
  const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("")
  const uuid = []
  if (len) {
    for (let i = 0; i < len; i++) {
      uuid[i] = chars[Math.floor(Math.random() * radix)]
    }
  } else {
    let r
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-"
    uuid[14] = "4"
    for (let i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = Math.floor(Math.random() * 16)
        uuid[i] = chars[(i === 19) ? ((r % 4) % 8) + 8 : r]
      }
    }
  }
  return uuid.join("")
}

搜索

复制