高德地图信息窗体InfoWindow 使用element UI组件进行图片放大

最新推荐文章于 2024-06-28 11:13:17 发布

知所云

最新推荐文章于 2024-06-28 11:13:17 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/qq_32881447/article/details/113867618

版权

本文介绍了如何在高德地图的InfoWindow中利用Vue.extend和Element UI的el-image组件，实现在地图信息窗口中点击图片进行大图预览的功能。原先尝试使用v-viewer插件，但由于页面解析问题导致错误，最终改用UI组件成功解决问题。

摘要由CSDN通过智能技术生成

高德地图信息窗体InfoWindow 使用element UI组件

需求：高德地图信息窗体InfoWindow里面的图片可以进行大图预览
解决方案，使用Vue.extend和element UI的el-image

import { Image }  from 'element-ui' //先要引入组件

 creatTextName(map, siteMarker, item, middleMarkers, type) {
   //这个是在驾车规划的途径点上面
      const { lineNameStr, spotNameStr, pathListNameStr } = this.toParams;
      // 给 Text 带上自定义私货
      siteMarker.lisaSiteInfo = item;
      // 监听地图- Text 的 点击事件
      const imgList = []
      const img =  this.changeImgUrl(item.image) //这里是个http地址
      imgList.push(img)
      const clickHandler1 = function (e) {
        const Content = Vue.extend({
                template: `<div>
                            <p>通行图片</p>
                            <el-image :preview-src-list="imgList" :src="imgList[0]" style="width: 300px; heigth: 300px">
                            </el-image>
                          </div>`,
                name: 'pageInfo',
                components: {
                    'el-image':Image //注册组件
                },
                data(){
                    return {
                        imgList:imgList
                    }
                }
             });
 
        const component = new Content().$mount();
        const infoWindow = new AMap.InfoWindow({})
        infoWindow.setContent(component.$el);
        infoWindow.open(map, e.lnglat)
      };
      siteMarker.on("click", clickHandler);
      siteMarker.setMap(map);
      middleMarkers.push(siteMarker);
      //-------siteText-------
      // label默认蓝框白底左上角显示，样式className为：amap-marker-label
      let text = "";
      if (type) {
        // text = item.latitude;
        text = item[spotNameStr];
      } else {
        text = "";
      }
      const siteText = new AMap.Text({
        offset: new AMap.Pixel(0, -50), //设置文本标注偏移量
        text: text,
        position: new AMap.LngLat(item.longitude, item.latitude), // 这里特殊 本数据结构， startLatitude
        map: map,
      });
      siteText.lisaSiteInfo = item;
      siteText.on("click", clickHandler);
      siteText.setMap(map);
      middleMarkers.push(siteText);
      return middleMarkers;
    },