腾讯地图显示多个地点,并添加弹窗信息

 var lastInfo = null;
    var markersArray = [];
    qqMapHelper.prototype.showPoints = function (data)
    {
        if (markersArray.length>0)
        {
            for (var i = 0; i < markersArray.length; i++)
            {
                markersArray[i].setMap(null);
            }
            markersArray = [];
        }
        var points = [];
        data.forEach((item, index) =>
        {
            var position = new qq.maps.LatLng(item.location.lat, item.location.lng);
            points.push(position);
            marker = new qq.maps.Marker({
                position: position,
                map: map
            });
            markersArray.push(marker);
            //标注点击事件
            var infoWindowHtml = '<div class="popover-content">';
            infoWindowHtml += '<div><a href="javascript:(0)" onclick="setPosition(' + item.location.lat + ',' + item.location.lng + ')"><span>' + item.title + '</span></a></div>'
            infoWindowHtml += '<p><strong>地址:</strong><span>' + item.address + '</span></p>';
            infoWindowHtml += '<p><strong>电话:</strong><span>' + (item.tel == undefined ? "暂无" : item.tel) + '</span></p>';
            infoWindowHtml += '</div>';

            var option = {
                map: map,
                position: marker,
                content: infoWindowHtml,
                offset: {   // 设置信息弹窗的偏移量,否则会和marker重合
                    x: 0,
                    y: -30
                }
            }
            var infoWindow = new qq.maps.InfoWindow(option);
            infoWindow.close();//初始关闭信息窗关闭
            //标注点击事件
            qq.maps.event.addListener(marker, 'click', function (evt)
            {             
                if (lastInfo == null)
                {
                    lastInfo = infoWindow;
                } else
                {
                    lastInfo.close();
                    lastInfo = infoWindow;
                }
                infoWindow.open();
            });

        });
        //计算LatLngBounds并设置缩放级别
        mapHelper.setViewport(points);
    }
posted @ 2020-11-25 15:33  来日可期0521  阅读(1646)  评论(0)    收藏  举报