前端开发攻略---用Vue带你玩转高德地图

原创

已于 2024-04-19 17:15:47 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-04-19 16:41:22 首次发布

1、演示

2、申请

若已经注册了高德地图开发者账号并且申请了key和安全密钥请跳过这一步

若没有注册高德地图开发者账号的请前往我之前的这篇

“引入高德地图，超详细，超简单，保姆级教程。”

3、安装依赖

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

4、示例代码

<template>
  <div style="display: flex">
    <div id="container"></div>
    <div style="display: flex; flex-direction: column; align-items: center">
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="toggleLayer">显示/隐藏图层</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="changeLayerOpcity">随机修改图层透明度</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="heavyLoadLayer">重载图层</el-button>
      <el-button type="primary" style="