高德地图渲染多点位并且点击出现提示框

参考内容
子组件代码

<template>
  <div class="info">
    <div style="text-align: center;">
      <h4>详 情</h4>
    </div>
    <p>省市: {{baseInfo.province}} {{baseInfo.city}}</p>
    <p>地址: {{baseInfo.address}}</p>
    <p>时间 : {{baseInfo.createdtime}}</p>
    <div class="amap-info-sharp">
      <i class="el-icon-caret-bottom"></i>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    baseInfo: {
      type: Object,
      default: {}
    },
    data () {
      return {
        overlay: null,
        infoWindow: null,
      }
    },
    methods: {
      // initialize (e) {
      //   this.overlay = e.overlay;
      //   this.infoWindow = e.infoWindow;
      // },
    }
  },
}
</script>
<style scoped lang="scss">
#del-div {
  position: absolute;
  right: 20;
  top: 20;
  transform: scale(1.2);
}
</style>

父组件代码

<template>
  <div id="box">
    <div id="container" style="height:100%;width:100%;"></div>
    <InfoWindowComponent ref="infowindow" :baseInfo="baseInfo"></InfoWindowComponent>
  </div>
</template>

<script>
import { getStationList } from "@/api/station"
import InfoWindowComponent from '../component/infoWindow.vue'
export default {
  components: {
    InfoWindowComponent
  },
  data () {
    return {
      mapNodeArr: [],
      baseInfo: {}
    }
  },
  created () {

  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 加载高德地图
    initMap () {
    //获取点位信息
      this.getMapNode()
      let that = this
      setTimeout(() => {
        let map = new AMap.Map('container', {
          resizeEnable: true,
          zoom: 11
        })
        // 添加工具栏
        map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar()
          // 比例尺
          const scale = new AMap.Scale()
          // 显示鹰眼
          const overView = new AMap.OverView()
          map.addControl(toolbar)
          map.addControl(scale)
          map.addControl(overView)
        })
        if (that.mapNodeArr && that.mapNodeArr.length > 0) {
          that.mapNodeArr.map(item => {
            // 创建一个 Marker 实例：
            let itemNode = [item.lon, item.lat]
            let marker = new AMap.Marker({
              position: itemNode,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: item.name
            });
            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);
            //点标记点击事件
            marker.on('click', (e) => {
              that.markerWindow(e, map, item)
            })
          })
        }
      }, 500)
    },
    // 点击出现弹框信息
    markerWindow (e, map, item) {
      let that = this
      that.baseInfo = item
      // console.log('点击获取点位信息', that.baseInfo)
      console.log('点击获取点位信息', that.$refs.infowindow)  //获取到组件的vue实例
      console.log('点击获取点位信息', that.$refs.infowindow.$el)  //获取到子组件的模板内容
      let infoWindow = new AMap.InfoWindow({
        // 是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示）
        autoMove: true,
        // 是否自定义窗体。设为true时，信息窗体外框及内容完全按照content所设的值添加（默认为false，即在系统默认的信息窗体外框中显示content内容）
        isCustom: false,
        anchor: 'bottom-center',
        content: that.$refs.infowindow.$el,
        // 弹出位置偏移量，可根据图标大小修改
        offset: new AMap.Pixel(0, -10),
        // 控制是否在鼠标点击地图后关闭信息窗体，默认false，鼠标点击地图后不关闭信息窗体
        closeWhenClickMap: true
      })
      // 这里重点了
      infoWindow.open(map, e.lnglat);
      // that.infoWindow = infoWindow;
      // 调用组件方法，初始化组件页面的infoWindow等数据
      // that.$refs.infowindow.initialize({
      //   overlay: e.target,
      //   infoWindow: that.infoWindow
      // });
    },
    // 获取地图点位信息
    getMapNode () {
      getStationList().then(res => {
        if (res.code == 200) {
          this.mapNodeArr = res.data
        }
      })
    },


  }

}
</script>
<style scoped lang="scss">
@import './style.scss';
</style>

显示效果

标签：map,渲染,baseInfo,item,AMap,new,infoWindow,提示框,高德
来源： https://blog.csdn.net/weixin_45669668/article/details/110479466