高德地图搭配Vue3

导包

npm i @amap/amap-jsapi-loader

当前使用的版本

"@amap/amap-jsapi-loader": "^1.0.1",
"vue": "3.2.37",

普通使用

建立地图组件目录

这边用的setup语法糖，所以页面没有分开搞

init地图用到的内容

// 地图dom
const map = shallowRef(null);
// 信息窗口
const infoWindow = ref(null);

加载地图组件

AMapLoader.load({
    key:"？？？？？？",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins:['AMap.ToolBar','AMap.Driving', 'AMap.ControlBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap)=>{
    
  }).catch(e=>{
    console.log(e);
  })

在地图回调函数中创建地图相关内容

AMapLoader.load({
  key:"???",             // 申请好的Web端开发者Key，首次调用 load 时必填
  version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  plugins:['AMap.ToolBar','AMap.Driving', 'AMap.ControlBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
}).then((AMap)=>{
  // 设置地图属性
  map.value = new AMap.Map("container",{  //设置地图容器id
    mapStyle: 'amap://styles/grey', // 地图样式
    viewMode:"3D",    //是否为3D地图模式
    zoom:15,           //初始化地图级别
    center:[lng.value, lat.value], //初始化地图中心点位置
    features: ['bg', 'road', 'building'],  // 地图显示要素：区域面，道路，建筑，标注
    pitch: 30, // 角度
    resizeEnable: true, // 是否监控地图容器尺寸变化
  });
  // 增加3d控制罗盘
  map.value.addControl(new AMap.ControlBar());
  // 初始化窗口容器
  infoWindow.value = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
  // 初始化企业信息(position就是每个点位的经纬度)
  list.value.map((item, i) => {
    // 初始化企业点位
    let marker = new AMap.Marker({
      position: item.position,
      map: map.value
    });
    // 初始化点位对应的企业信息
    let info = [];
    info.push(`
      <div class='input-card content-window-card'>
        <div class="company-box">
          <img style="height:18px;" src=" http://？？？/images/company_normal.png "/>
          <p class="c-name">${item.name}</p>
        </div>
         <div class="tab-box">
      `)
    item.photovoltaicStatus
        ? info.push(`<span class="tab-content tab-1">test1</span>`) : null
    item.windPowerStatus
        ? info.push(`<span class="tab-content tab-2">test2</span>`) : null
    item.hydropowerStatus
        ? info.push(`<span class="tab-content tab-3">test3</span>`) : null
    info.push(`
          </div>
        </div>
      `)

    // 点位绑定企业信息
    marker.content = info.join("");
    // 点位绑定地图点位容器
    marker.on('click', markerClick);
    // 初始化加载第一个点位事件
    marker.emit('click', {target: marker});
  })
  // 根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
  map.value.setFitView()
}).catch(e=>{
  console.log(e);
})

点击事件绑定

// 信息窗口容器加载内容
const markerClick = (e) => {
  // console.log('test', e, infoWindow.value)
  infoWindow.value.setContent(e.target.content);
  infoWindow.value.open(map.value, e.target.getPosition());
}

完整流程

效果

父组件

js

import TenMap from  '@/components/BoxMap'

传参

// 中心点
const storeModel = reactive({
  Latitude: 31.451364, // 纬度
  Longitude: 119.434551, // 经度
})
// 后台给的数据
companyList：[       {companyName: 'test1', lnglats: [129.436064, 21.451821]},
    {companyName: 'test2', lnglats: [129.435377, 21.451608]},
    {companyName: 'test3', lnglats: [129.437076, 21.451503]},
    {companyName: 'test4', lnglats: [129.434979, 21.452016]},
]

html

<ten-map :lat="storeModel.Latitude"
         :lng="storeModel.Longitude"
         :listData="companyList"
         ref="tengMap"></ten-map>

子组件

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

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { shallowRef } from '@vue/reactivity'
import { onMounted, toRefs, ref, watch } from 'vue'

const props = defineProps({
  lat: Number,
  lng: Number,
  list: Array,
})

const {
  lng,
  lat,
  list,
} = toRefs(props)

// 地图dom
const map = shallowRef(null);
// 信息窗口
const infoWindow = ref(null);

const aMap = ref({})
const listData = ref([])

console.log('子组件mapList', props.list, lat.value, lng.value)
// 信息窗口容器加载内容
const markerClick = (e) => {
  // console.log('test', e, infoWindow.value)
  infoWindow.value.setContent(e.target.content);
  infoWindow.value.open(map.value, e.target.getPosition());
}

const initMap = () => {
  AMapLoader.load({
    key:"？？？",             // 申请好的Web端开发者Key，首次调用 load 时必填
    version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins:['AMap.ToolBar','AMap.Driving', 'AMap.ControlBar'],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap)=>{
    // 设置地图属性
    map.value = new AMap.Map("container",{  //设置地图容器id
      mapStyle: 'amap://styles/grey', // 地图样式
      viewMode:"3D",    //是否为3D地图模式
      zoom:15,           //初始化地图级别
      center:[lng.value, lat.value], //初始化地图中心点位置
      features: ['bg', 'road', 'building'],  // 地图显示要素：区域面，道路，建筑，标注
      pitch: 30, // 角度
      resizeEnable: true, // 是否监控地图容器尺寸变化
    });
    // 增加3d控制罗盘
    map.value.addControl(new AMap.ControlBar());
    // 初始化窗口容器
    infoWindow.value = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    // 初始化企业信息
    listData.value.map((item, i) => {
      // 初始化企业点位
      let marker = new AMap.Marker({
        position: item.position,
        map: map.value
      });
      // 初始化点位对应的企业信息
      let info = [];
      info.push(`
        <div class='input-card content-window-card'>
          <div class="company-box">
            <img style="height:18px;" src=" http://？？？/images/company_normal.png "/>
            <p class="c-name">${item.name}</p>
          </div>
           <div class="tab-box">
        `)
      item.photovoltaicStatus
          ? info.push(`<span class="tab-content tab-1">test1</span>`) : null
      item.windPowerStatus
          ? info.push(`<span class="tab-content tab-2">test2</span>`) : null
      item.hydropowerStatus
          ? info.push(`<span class="tab-content tab-3">test3</span>`) : null
      info.push(`
            </div>
          </div>
        `)

      // 点位绑定企业信息
      marker.content = info.join("");
      // 点位绑定地图点位容器
      marker.on('click', markerClick);
      // 初始化加载第一个点位事件
      marker.emit('click', {target: marker});
    })
    map.value.setFitView()
  }).catch(e=>{
    console.log(e);
  })
}
onMounted(() => {
  initMap()
})
</script>

<style lang="scss" scoped>
#container{
  padding:0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
.custom-input-card{
  width: 18rem;
}

.custom-input-card .btn:last-child{
  margin-left: 1rem;
}

:deep(.amap-info-content) {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background: rgba(255, 255, 255, 0);
  //background: rgba(39, 51, 64, .6);
  //border: 1px solid #273340;
  .content-window-card{
    width: 12rem;
    height: 5rem;
    padding: 0.75rem 0 0 0;
    box-shadow: none;
    .company-box{
      width: 180px;
      height: 36px;
      background: rgba(39, 51, 64, .9);
      border: 1px solid #273340;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 10px;
      box-sizing: border-box;
      .c-name{
        margin-left: 10px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FEFEFE;
      }
    }
    .tab-box{
      width: 100%;
      margin-top: 4px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .tab-content{
        display: inline-block;
        text-align: center;
        width: 40px;
        height: 24px;
        background: rgba(26, 35, 44, .9);
        border: 1px solid #273340;
        margin: 0 3px;
        &:first-child{
          margin-left: 0;
        }
        &.tab-1{
          color: rgba(59, 248, 184, 1);
        }
        &.tab-2{
          color: rgba(59, 245, 226, 1);
        }
        &.tab-3{
          color: rgba(59, 220, 254, 1);
        }
      }
    }
  }
}
</style>

参考文档

官方文档还是很给力的，基本都有

官方api文档，你要的属性方法都有

vue官方导入教程

高德地图坐标拾取

常用案例官方demo