[BD] LbsAmap的简单使用

项目文档

一.安装

• 1.安装核心库 pnpm install @vuemap/vue-amap --save
• 2.安装loca库 pnpm install @vuemap/vue-amap-loca --save
• 3.安装扩展库 pnpm install @vuemap/vue-amap-extra --save

二.初始化

在web/src/main.ts中:

// 引入Amap.step1
import VueAMap, {initAMapApiLoader} from '@vuemap/vue-amap';
// import VueAMapLoca from '@vuemap/vue-amap-loca';
// import VueAMapExtra from '@vuemap/vue-amap-extra';
import '@vuemap/vue-amap/dist/style.css'

// 引入Amap.step2
initAMapApiLoader({
    key: '32位的key',
    securityJsCode: '32位的code', // 新版key需要配合安全密钥使用
    //Loca:{
    //  version: '2.0.0'
    //} // 如果需要使用loca组件库，需要加载Loca
})

三.在项目中使用

web\src\views\backend\dashboard.vue 修改此组件

<template>
  <div class="map-page-container">
    <el-amap
      :center="center"
      :zoom="zoom"
      @init="init"
    />
  </div>
  <div class="toolbar">
    <button @click="add()">添加标号</button>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
const zoom = ref(12);
const center = ref([114.12, 22.59]); // 设置地图中心(无标记)
let map = null;

// -设置中心标记位置
const init = (e) => {
  const marker = new AMap.Marker({
    position: [114.12, 22.63]
  });
  e.add(marker);
  map = e;
  console.log('map init: ', map)
}
// - 添加标记点
const add = () => {
  const marker = new AMap.Marker({
    position: [114.12, 22.65]
  });
  map.add(marker);
}
</script>

<style>
.map-page-container {
  width:800px;height:500px;border:1px solid #369
}
</style>

可能遇到的问题

• pinal和vue的版本问题
• 解决方案: 1.使用pnpm进行安装可以解决大部分问题