高德地图, 点聚合效果,以及给点添加点击事件

这个试用于高德地图,

首先要调用方法 'AMap.MarkerCluster',

if (clusters) {

clusters.setMap(null)

}

clusters = new VueAmap.MarkerCluster(this.map, this.points, {

gridSize: 30, // 自定义聚合点样式

styles: styles,

renderMarker: this.renderMarker, //非聚合点的样式,可以自己定义

});

let styles = [{

url: 'https://a.amap.com/jsapi_demos/static/images/blue.png',

size: new VueAmap.Size(32, 32),

offset: new VueAmap.Pixel(-16, -16)

      }]

 renderMarker(context) {   //给非聚合点添加点击,等方法,

      this.getTime()

      this.onAndOff(context.data[0].item.reportTime, this.newTime, this.$vue_config.inspectionMinNum)

      console.log('context', context.data[0]); //这个看个人要求,传的数据可以不传

      context.marker.setContent(`<img src="${this.img}" width="40px" height="40px" alt="">`);

      //此处为设置标记在地图上的偏移,根据标记物大小处理

      context.marker.setOffset(new VueAmap.Pixel(-20, -30));

      //此处为设置标记是否显示在最上方,一般只有选中的标记在最上方

      context.marker.setTop(top);

      //此处为设置标记携带的数据,点击事件会使用

      context.marker.setExtData({

        id: context.data[0].item

      });

      //此处为添加单个标记点击事件

      context.marker.on('dblclick', ev => {

        //当前标记居中

        this.currentPerson = context.data[0].item

        console.log("巡检员", this.amam)

        this.$refs.personInfo.showDialog(this.currentPerson)

        this.currentPerson = {}

      });

      context.marker.on("rightclick", (res) => {

        this.currentPerson = context.data[0].item

        vueContextMenu.open(this.map, res.lnglat);

        this.contextMenuPositon = res.lnglat;

        let center = [res.lnglat.lng, res.lnglat.lat]

        this.centerArr = center

        setTimeout(() => {

          this.currentPerson = {}

        }, 4000)

      });

      let infoWindow = new VueAmap.InfoWindow({

        content: context.data[0].item.userName + ':最后上报点位时间' + context.data[0].item.reportTime,

        offset: new VueAmap.Pixel(0, -38),

      });

      context.marker.on("mouseover", (e) => {

        // 此时 给此点位信息窗体,显示任务名称

        if (context.data[0].lnglat.lng && context.data[0].lnglat.lat) {

          infoWindow.open(this.map, [context.data[0].lnglat.lng, context.data[0].lnglat.lat])

        }

        // console.log("point1", point, item)

      })

      context.marker.on("mouseout", (e) => {

        infoWindow.close()

      })

      context.marker.setLabel({

        direction: 'top',

        offset: new VueAmap.Pixel(0, 0),  //设置文本标注偏移量

        content: "<div class='info' style='border:0;'>" + context.data[0].item.userName.substr(0, 1) + "</div>",

        //设置文本标注内容

      });

    },

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一款跨平台的移动应用开发框架,而高德地图是一款广泛使用的地图服务平台。在uniapp中内置了高德地图,使得开发者可以方便地在应用中使用地图功能。 聚合高德地图提供的一种功能,它可以将地图上的大量标注聚合起来,以提升地图的可视化效果和交互体验。在开发应用时,我们可以通过uniapp内置的高德地图组件,结合聚合功能,实现地图上大量标注的高效展示。 要使用聚合功能,我们首先需要在应用中引入高德地图组件,并设置地图的初始化参数,如地图的中心坐标、缩放级别等。然后,我们可以通过调用高德地图Marker对象来添加各个标注,并设置每个标注的经纬度、图标等属性。 当我们需要使用聚合功能时,可以通过高德地图Cluster对象来实现。我们可以将所有的标注传递给Cluster对象,并设置聚合的样式、点击事件等。Cluster对象会根据一定的规则将附近的标注聚合在一起,形成一个聚合。当用户聚合时,可以通过点击事件获取到该聚合下的所有标注,以便进一步操作或展示。 通过在uniapp中使用内置的高德地图组件和聚合功能,我们可以轻松实现地图的展示和标注聚合,为用户提供更好的地图浏览体验。利用这些功能,我们可以开发一些基于地图的应用,如地检索、附近的人等功能,丰富用户的使用场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值