地图点击出弹窗

    //初始化地图
    let heatMap = new AMap.Map('heatMapContainer', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        mapStyle: "amap://styles/497004ae2c51a8533ae790fa18b72c5e",
        center:  [121.474198,31.220791],
        zoom: 14, //初始地图级别
        features: ['bg', 'road', 'building', 'point'],
        zooms: [13,18]
    });

    // 高德地图点击获取经纬度
    heatMap.on('click', function(e) {
        setTimeout( () => {
            if(!clickMove) return;
            $('.loading').show()
            $.ajax({
                url: setPathInit() + '/vios/commandDataBound/getDataByXYAndTimeStr',
                data: {
                    xAxis: e.lnglat.getLng(),
                    yAxis: e.lnglat.getLat(),
                    timeStr: collectNowHeatMapTime.replace('R','')
                },
                type: "POST",
                dataType: "json",
                success: function (data) {
                    if(data.code != 500) {
                        $('.loading').hide()

                        var icon = new AMap.Icon({
                            image: ctx + '/views2/pages/demonstration/img/heatMapPointImg.png',
                            size: new AMap.Size(30, 30)
                        });

                        var marker = new AMap.Marker({
                            map: heatMap,
                            icon,
                            position:new AMap.LngLat(data.xAxis,data.yAxis),
                            title: data.id,
                            extData: data.data
                        });

                        collectHeatMapPointIndex++;
                        marker.setLabel({
                            offset: new AMap.Pixel(-100, -100),  //设置文本标注偏移量
                            content: `
                            <div class="heatMapBox" id="heatMapBox${collectHeatMapPointIndex}">
                                <h2 class="insetHeatMapBox">
                                    <p><span>名称：</span><span>${data.id}</span></p>
                                    <p><span>压力：</span><span>${parseInt(data.data)} kPa</span></p>
                                    <p><span>时间：</span><span>${data.time}</span></p>
                                    <div class="moveHeatMapBox" onclick="dragHeatMapBox('${data.id}','heatMapBox${collectHeatMapPointIndex}')"></div>
                                    <div class="closeHeatMapBox" onclick="removeHeatMapPoint('${data.id}','heatMapBox${collectHeatMapPointIndex}')">x</div>
                                </h2>
                            </div>
                        `,
                            direction: 'top'
                        });

                        heatMap.add(marker)

                        collectHeatMapPoint.push(marker)

                        if(collectHeatMapPoint.length > 0) {
                            $('.removeAllHeatMapPoints').show()
                        }

                    } else {
                        showTipsDialog(9)
                    }

                }
            })
        },300)

    });

 // 固定选中的 热力图 压力点
    function dragHeatMapBox(name, idClass) {
        clickMove = false;
        setTimeout(()=> {
            clickMove = true
        },800)
        collectHeatMapPoint.forEach( item => {

            if(item.getTitle() == name) {

                var oldTop = $('#'+idClass).offset().top;
                var oldLeft = $('#'+idClass).offset().left;

                $('#heatMapContainer').prepend($('#'+idClass).clone())

                item.setLabel({
                    offset: new AMap.Pixel(0, 0),  //设置文本标注偏移量
                    content: '',
                    direction: 'top'
                });

                $('#'+idClass).css('top', oldTop + 'px')
                $('#'+idClass).css('left', oldLeft + 'px')

                $('#'+idClass).attr('ondblclick',`moveHeatMapPointJump('${item.getTitle()}','${idClass}')`)

                $('#'+idClass + ' .moveHeatMapBox').hide()
              
            }

        })
    }