标签：map 渲染 baseInfo item AMap new infoWindow 提示框 高德

参考内容
子组件代码

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。